From a5c168ee9db4ed0af5b352b8a439508b276de69d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 19 Feb 2026 21:42:30 +0200
Subject: [PATCH] fix: upgrade to pointer events for cancellation support,
 final a11y cleanup

---
 src/App.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4c495f8..595aa8a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -829,7 +829,7 @@ function App() {
     };
   }, [activeTabId, showSidebar]);
 
-  const startSidebarResize = (e: React.MouseEvent) => {
+  const startSidebarResize = (e: React.PointerEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setResizeStartState({ startX: e.clientX, startWidth: sidebarWidth });
@@ -1183,7 +1183,7 @@ function App() {
       <AnimatePresence>
         {tabs.length > 1 && (
           <motion.div className="tab-bar" initial={{ height: 0, opacity: 0 }} animate={{ height: 38, opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.25, ease: materialEase }}>
-            <button className={`tab-scroll-arrow ${tabScrollState.canLeft ? 'visible' : ''}`} aria-label="Scroll tabs left" onMouseDown={() => startScrollingTabs('left')} onMouseUp={stopScrollingTabs} onMouseLeave={stopScrollingTabs}><ChevronLeft size={14} /></button>
+            <button className={`tab-scroll-arrow ${tabScrollState.canLeft ? 'visible' : ''}`} aria-label="Scroll tabs left" onPointerDown={() => startScrollingTabs('left')} onPointerUp={stopScrollingTabs} onPointerLeave={stopScrollingTabs}><ChevronLeft size={14} /></button>
             <div className="tab-scroll-container" ref={tabScrollRef} role="tablist" onKeyDown={handleTabListKeyDown}>
               <AnimatePresence initial={false}>
                 {tabs.map((tab, index) => (
@@ -1194,7 +1194,7 @@ function App() {
                 ))}
               </AnimatePresence>
             </div>
-            <button className={`tab-scroll-arrow ${tabScrollState.canRight ? 'visible' : ''}`} aria-label="Scroll tabs right" onMouseDown={() => startScrollingTabs('right')} onMouseUp={stopScrollingTabs} onMouseLeave={stopScrollingTabs}><ChevronRight size={14} /></button>
+            <button className={`tab-scroll-arrow ${tabScrollState.canRight ? 'visible' : ''}`} aria-label="Scroll tabs right" onPointerDown={() => startScrollingTabs('right')} onPointerUp={stopScrollingTabs} onPointerLeave={stopScrollingTabs}><ChevronRight size={14} /></button>
           </motion.div>
         )}
       </AnimatePresence>
@@ -1228,7 +1228,7 @@ function App() {
                 aria-orientation="vertical"
                 aria-label="Resize sidebar"
                 tabIndex={0}
-                onMouseDown={startSidebarResize}
+                onPointerDown={startSidebarResize}
                 onKeyDown={(e) => {
                   if (e.key === 'ArrowRight') {
                     e.preventDefault();