From affa32cbaabc26ccb3add3d9115aa6e2244e0a6e Mon Sep 17 00:00:00 2001 From: claude-stand Date: Thu, 2 Jul 2026 16:28:03 +0300 Subject: [PATCH] fix(ui): collapse global sidebar to a drawer below 992px (tablet layout overflow) At tablet widths (~768px) the fixed ~300px global sidebar stayed pinned, leaving too little room for content: the settings tables (Members etc.) overflowed the offset content area and pushed the Role/actions columns off-screen with no horizontal scroll (unreachable). Raise the AppShell navbar (and page aside) breakpoint from `sm` (768px) to `md` (992px) so the whole tablet band uses the toggle drawer (closed by default) and content gets the full width. Verified with Playwright screenshots: 768px settings/members now fits all columns (table right 736<768, no overflow); desktop (>=992px) unchanged (sidebar pinned, content offset); mobile unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../src/components/layouts/global/global-app-shell.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/client/src/components/layouts/global/global-app-shell.tsx b/apps/client/src/components/layouts/global/global-app-shell.tsx index 41d3886f..5bff0bab 100644 --- a/apps/client/src/components/layouts/global/global-app-shell.tsx +++ b/apps/client/src/components/layouts/global/global-app-shell.tsx @@ -88,7 +88,13 @@ export default function GlobalAppShell({ header={{ height: 45 }} navbar={{ width: isSpaceRoute ? sidebarWidth : 300, - breakpoint: "sm", + // `md` (not `sm`): below 992px the fixed ~300px sidebar leaves too little + // room for content — the settings tables (Members/…) overflow the offset + // content area on tablet (~768px) and clip the Role/actions columns + // off-screen with no horizontal scroll. Collapsing the navbar to a toggle + // drawer across the whole tablet band frees the full width for content + // (the mobile drawer is closed by default, so nothing overlaps on load). + breakpoint: "md", collapsed: { mobile: !mobileOpened, desktop: !desktopOpened, @@ -97,7 +103,7 @@ export default function GlobalAppShell({ aside={ isPageRoute && { width: 420, - breakpoint: "sm", + breakpoint: "md", collapsed: { mobile: !isAsideOpen, desktop: !isAsideOpen }, } }