From fea1bf68c5a6061195596e2af9b74f2fc41a43bf Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Mon, 1 Dec 2025 00:07:15 +0100
Subject: [PATCH] refactor: extract common resize handle styles into a reusable
 component.

---
 frontend/src/preview/DocumentViewerPanel.tsx  |  4 +-
 frontend/src/sidebar/Sidebar.tsx              |  4 +-
 .../src/styles/components/resize-handle.css   | 45 +++++++++++++++++++
 frontend/src/styles/detail/detail-panels.css  | 35 ---------------
 frontend/src/styles/index.css                 |  3 +-
 frontend/src/styles/sidebar/sidebar.css       | 40 +----------------
 6 files changed, 53 insertions(+), 78 deletions(-)
 create mode 100644 frontend/src/styles/components/resize-handle.css

diff --git a/frontend/src/preview/DocumentViewerPanel.tsx b/frontend/src/preview/DocumentViewerPanel.tsx
index 8fb1ce3..b14b446 100644
--- a/frontend/src/preview/DocumentViewerPanel.tsx
+++ b/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;
 
diff --git a/frontend/src/sidebar/Sidebar.tsx b/frontend/src/sidebar/Sidebar.tsx
index 6bbe91e..4ebc15a 100644
--- a/frontend/src/sidebar/Sidebar.tsx
+++ b/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
diff --git a/frontend/src/styles/components/resize-handle.css b/frontend/src/styles/components/resize-handle.css
new file mode 100644
index 0000000..e47b084
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/styles/detail/detail-panels.css b/frontend/src/styles/detail/detail-panels.css
index 3776f0d..24fd5aa 100644
--- a/frontend/src/styles/detail/detail-panels.css
+++ b/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;
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index e313188..8136d04 100644
--- a/frontend/src/styles/index.css
+++ b/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';
\ No newline at end of file
diff --git a/frontend/src/styles/sidebar/sidebar.css b/frontend/src/styles/sidebar/sidebar.css
index c4e43be..bbe7b6b 100644
--- a/frontend/src/styles/sidebar/sidebar.css
+++ b/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);
-}
+}
\ No newline at end of file