refactor: extract common resize handle styles into a reusable component.

frontend/src/preview/DocumentViewerPanel.tsx

@@ -393,11 +393,11 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
   const resizeHandle = isSidebarVariant ? (
     <button
       type="button"
-      className={`detail-panel__resize-handle${isPanelResizing ? ' is-active' : ''}`}
+      className={`resize-handle resize-handle--left${isPanelResizing ? ' is-active' : ''}`}
       aria-label="Resize detail panel"
       {...resizeHandleProps}
     >
-      <span aria-hidden="true" />
+      <span className="resize-handle__line" aria-hidden="true" />
     </button>
   ) : null;
 

frontend/src/sidebar/Sidebar.tsx

@@ -103,11 +103,11 @@ const Sidebar: React.FC<SidebarProps> = ({
     <aside className={sidebarClassNames.join(' ')} ref={sidebarRef} style={sidebarStyle}>
       <button
         type="button"
-        className={`sidebar__resize-handle${isResizingSidebar ? ' is-active' : ''}`}
+        className={`resize-handle resize-handle--right${isResizingSidebar ? ' is-active' : ''}`}
         aria-label="Resize sidebar"
         {...sidebarHandleProps}
       >
-        <span aria-hidden="true" />
+        <span className="resize-handle__line" aria-hidden="true" />
       </button>
 
       <SidebarHeader

frontend/src/styles/components/resize-handle.css

@@ -0,0 +1,45 @@
+.resize-handle {
+    position: absolute;
+    top: 0;
+    width: 1.2rem;
+    height: 100%;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: col-resize;
+    z-index: 10;
+    touch-action: none;
+}
+
+.resize-handle__line {
+    width: 3px;
+    height: 100%;
+    border-radius: 999px;
+    background: transparent;
+    transition: background 120ms ease;
+}
+
+.resize-handle:hover .resize-handle__line,
+.resize-handle:focus-visible .resize-handle__line,
+.resize-handle.is-active .resize-handle__line {
+    background: var(--border);
+}
+
+.resize-handle:focus-visible {
+    outline: 2px solid color-mix(in oklch, var(--border) 80%, transparent);
+    outline-offset: 2px;
+    border-radius: 999px;
+}
+
+/* Modifiers for positioning */
+.resize-handle--right {
+    right: -0.6rem;
+}
+
+.resize-handle--left {
+    left: -0.6rem;
+}

frontend/src/styles/detail/detail-panels.css

@@ -31,41 +31,6 @@
   user-select: none;
 }
 
-.detail-panel__resize-handle {
-  position: absolute;
-  top: 0;
-  left: -0.6rem;
-  width: 1.2rem;
-  height: 100%;
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: col-resize;
-}
-
-.detail-panel__resize-handle span {
-  width: 2px;
-  height: 100%;
-  border-radius: 999px;
-  background: transparent;
-  transition: background 120ms ease;
-}
-
-.detail-panel__resize-handle:hover span,
-.detail-panel__resize-handle:focus-visible span,
-.detail-panel__resize-handle.is-active span {
-  background: var(--border);
-}
-
-.detail-panel__resize-handle:focus-visible {
-  outline: 2px solid color-mix(in oklch, var(--border) 80%, transparent);
-  outline-offset: 2px;
-  border-radius: 999px;
-}
 
 .panel-header {
   display: flex;

frontend/src/styles/index.css

@@ -1,6 +1,7 @@
 @import './base/theme.css';
 @import './base/controls.css';
 @import './layout/panel-header-controls.css';
+@import './components/resize-handle.css';
 @import './preview/preview-zoom.css';
 @import './base/iconography.css';
 @import './documents/controls.css';
@@ -20,4 +21,4 @@
 @import './auth/login.css';
 @import './documents/shared-snippets.css';
 @import './uploads/overlay.css';
-@import './base/text-button.css';
+@import './base/text-button.css';

frontend/src/styles/sidebar/sidebar.css

@@ -142,42 +142,6 @@
   user-select: none;
 }
 
-.sidebar__resize-handle {
-  position: absolute;
-  top: 0;
-  right: -0.4rem;
-  width: 0.8rem;
-  height: 100%;
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: col-resize;
-  z-index: 1;
-}
-
-.sidebar__resize-handle span {
-  width: 2px;
-  height: 100%;
-  border-radius: 999px;
-  background: transparent;
-  transition: background 120ms ease;
-}
-
-.sidebar__resize-handle:hover span,
-.sidebar__resize-handle:focus-visible span,
-.sidebar__resize-handle.is-active span {
-  background: var(--border);
-}
-
-.sidebar__resize-handle:focus-visible {
-  outline: 2px solid color-mix(in oklch, var(--border) 80%, transparent);
-  outline-offset: 2px;
-  border-radius: 999px;
-}
 
 .sidebar__body {
   flex: 1;
@@ -423,7 +387,7 @@
   padding: 0 1rem 0.25rem;
 }
 
-.menu__section > .menu__slider {
+.menu__section>.menu__slider {
   margin-top: -0.25rem;
 }
 
@@ -755,4 +719,4 @@
 .sidebar-correspondent-item.active {
   background: var(--sidebar-active-bg);
   color: var(--fg);
-}
+}