Compare commits

...

2 Commits

Author SHA1 Message Date
claude-stand fa439d7c7b fix(ui): match sidebar toggle breakpoint to navbar (md) so the tablet drawer opens
Follow-up to the navbar sm->md change on this branch: the two header sidebar
toggles were still gated at sm, so in the 768-991 band the DESKTOP toggle was
shown while the navbar used the MOBILE drawer collapse state — clicking it
flipped the wrong atom and the drawer could not be opened (sidebar unreachable
at 768/820, caught by QA). Gate the mobile toggle hiddenFrom=md and the desktop
toggle visibleFrom=md so the mobile toggle drives the drawer across the whole
tablet band.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-02 18:19:59 +03:00
claude-stand affa32cbaa 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) <noreply@anthropic.com>
2026-07-02 16:28:03 +03:00
2 changed files with 16 additions and 4 deletions
@@ -53,7 +53,13 @@ export function AppHeader() {
aria-label={t("Sidebar toggle")} aria-label={t("Sidebar toggle")}
opened={mobileOpened} opened={mobileOpened}
onClick={toggleMobile} onClick={toggleMobile}
hiddenFrom="sm" // Must match the AppShell navbar breakpoint (md). The navbar
// collapses to the MOBILE drawer below md, so the mobile toggle
// (which flips mobileOpened) must be the one visible across the
// whole <md band — otherwise at 768-991 the desktop toggle showed
// but flipped the wrong atom, leaving the drawer unopenable (the
// regression from the initial sm->md navbar change).
hiddenFrom="md"
size="sm" size="sm"
/> />
</Tooltip> </Tooltip>
@@ -63,7 +69,7 @@ export function AppHeader() {
aria-label={t("Sidebar toggle")} aria-label={t("Sidebar toggle")}
opened={desktopOpened} opened={desktopOpened}
onClick={toggleDesktop} onClick={toggleDesktop}
visibleFrom="sm" visibleFrom="md"
size="sm" size="sm"
/> />
</Tooltip> </Tooltip>
@@ -88,7 +88,13 @@ export default function GlobalAppShell({
header={{ height: 45 }} header={{ height: 45 }}
navbar={{ navbar={{
width: isSpaceRoute ? sidebarWidth : 300, 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: { collapsed: {
mobile: !mobileOpened, mobile: !mobileOpened,
desktop: !desktopOpened, desktop: !desktopOpened,
@@ -97,7 +103,7 @@ export default function GlobalAppShell({
aside={ aside={
isPageRoute && { isPageRoute && {
width: 420, width: 420,
breakpoint: "sm", breakpoint: "md",
collapsed: { mobile: !isAsideOpen, desktop: !isAsideOpen }, collapsed: { mobile: !isAsideOpen, desktop: !isAsideOpen },
} }
} }