From c44fd220318e7c711a472185cf8eb866ff8dd739 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Sat, 17 Jan 2026 13:10:57 -0500 Subject: [PATCH] fix: use different gaps for open and closed sidebar states --- .../Components/v1/UserGuide/UserGuideSidebarContext.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/client/src/Components/v1/UserGuide/UserGuideSidebarContext.jsx b/client/src/Components/v1/UserGuide/UserGuideSidebarContext.jsx index d40f39849..41d36a024 100644 --- a/client/src/Components/v1/UserGuide/UserGuideSidebarContext.jsx +++ b/client/src/Components/v1/UserGuide/UserGuideSidebarContext.jsx @@ -5,8 +5,10 @@ const SIDEBAR_STATE_KEY = "checkmate-sidebar-open"; // Constants for sidebar dimensions export const TAB_BAR_WIDTH = 41; // 40px width + 1px border export const DEFAULT_CONTENT_WIDTH = 400; -// Additional gap beyond the sidebar width -export const MIN_GAP = 24; +// Gap when sidebar is closed (need more space since tab bar is narrow) +export const CLOSED_GAP = 24; +// Gap when sidebar is open (less needed since content edge is clear) +export const OPEN_GAP = 8; const UserGuideSidebarContext = createContext(null); @@ -22,7 +24,8 @@ export const UserGuideSidebarProvider = ({ children }) => { // Calculate total sidebar width and required padding const totalSidebarWidth = isOpen ? TAB_BAR_WIDTH + contentWidth : TAB_BAR_WIDTH; - const requiredPaddingRight = totalSidebarWidth + MIN_GAP; + const gap = isOpen ? OPEN_GAP : CLOSED_GAP; + const requiredPaddingRight = totalSidebarWidth + gap; // Set CSS custom properties on document root for global access useEffect(() => {