From 2ccbb155fb80982a51261d6f57d02c002a261076 Mon Sep 17 00:00:00 2001 From: Hendrik de Graaf Date: Wed, 21 Aug 2024 11:47:58 +0200 Subject: [PATCH] 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 --- src/components/MainSidebar/MainSidebar.module.css | 10 ++++------ .../MainSidebar/useResizableAccessorySidebar.js | 5 +++-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/MainSidebar/MainSidebar.module.css b/src/components/MainSidebar/MainSidebar.module.css index 52197fe95..cd81341ef 100644 --- 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 index d9a309114..64dfeae58 100644 --- 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