fix: reduce resizehandle interaction area on left side [DHIS2-17923] (#…

…579) * fix: reduce resizehandle interaction area on left side * fix: adjust starting point X to new styles
dhis2 · Aug 21, 2024 · 2ccbb15 · 2ccbb15
1 parent e479574
commit 2ccbb15
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/src/components/MainSidebar/MainSidebar.module.css b/src/components/MainSidebar/MainSidebar.module.css
@@ -42,9 +42,9 @@
 .resizeHandle {
     position: absolute;
     height: 100%;
-    /* Interaction area extends 8px left and
-     * right of the sidebar border */
-    width: 17px;
+    /* Interaction area extends 1px left and
+     * 8px right of the sidebar border */
+    width: 10px;
     right: -8px;
     cursor: col-resize;
 }
@@ -54,9 +54,7 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    /* Blue line extends 1px left and right
-     * from sidebar border */
-    left: 7px;
+    left: 0;
     width: 3px;
     pointer-events: none;
     opacity: 0;

diff --git a/src/components/MainSidebar/useResizableAccessorySidebar.js b/src/components/MainSidebar/useResizableAccessorySidebar.js
@@ -18,8 +18,9 @@ const createWidthWithinBoundsCalculator = (event, startWidth) => {
     const isKeyboardMode = event.type === 'focus'
     const rect = element.getBoundingClientRect()
     const minWidth = ACCESSORY_PANEL_MIN_WIDTH
-    // Take center of draghandle on X-axis as starting point
-    const startPageX = Math.ceil(rect.left + rect.width / 2)
+    /* This needs to correspond with right edge of the accessory sidebar
+     * which is 2px right of the left edge of the resize handle */
+    const startPageX = Math.ceil(rect.left + 2)
     const maxPageX = window.innerWidth - ACCESSORY_PANEL_MIN_PX_AT_END
     const maxDeltaX = maxPageX - startPageX
     const maxWidth = startWidth + maxDeltaX