fix(layout): collapse sidebar to a drawer below the md breakpoint #43

Merged

nrupard merged 1 commit from fix/mobile-drawer into main

2026-05-06 17:03:44 +02:00

nrupard commented

2026-05-06 17:03:36 +02:00

Owner

Below 768px the enclave switcher and main sidebar were eating most of the viewport, so the message pane had no usable width on phones. Wrap both navigation columns in a lc-nav-panel element that is hidden by default on mobile and pinned to the left as a fixed drawer when opened. Above the md breakpoint the panel returns to its normal in-flow position so the desktop layout is unchanged.
Add a hamburger button at the top of every page that opens the drawer, plus a backdrop that dismisses it. Clicks on a navigation link inside the drawer auto-close it so following a DM does not leave the drawer covering the conversation.
The htmx:wsOpen and other top-level scripts continue to live inside {% block main %}; only the chrome around them moved.

Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com

- Below 768px the enclave switcher and main sidebar were eating most of the viewport, so the message pane had no usable width on phones. Wrap both navigation columns in a `lc-nav-panel` element that is hidden by default on mobile and pinned to the left as a fixed drawer when opened. Above the md breakpoint the panel returns to its normal in-flow position so the desktop layout is unchanged. - Add a hamburger button at the top of every page that opens the drawer, plus a backdrop that dismisses it. Clicks on a navigation link inside the drawer auto-close it so following a DM does not leave the drawer covering the conversation. - The `htmx:wsOpen` and other top-level scripts continue to live inside `{% block main %}`; only the chrome around them moved. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

nrupard added 1 commit

2026-05-06 17:03:36 +02:00

fix(layout): collapse sidebar to a drawer below the md breakpoint da93cc3a05

- Below 768px the enclave switcher and main sidebar were eating most of the viewport, so the message pane had no usable width on phones. Wrap both navigation columns in a `lc-nav-panel` element that is hidden by default on mobile and pinned to the left as a fixed drawer when opened. Above the md breakpoint the panel returns to its normal in-flow position so the desktop layout is unchanged.
- Add a hamburger button at the top of every page that opens the drawer, plus a backdrop that dismisses it. Clicks on a navigation link inside the drawer auto-close it so following a DM does not leave the drawer covering the conversation.
- The `htmx:wsOpen` and other top-level scripts continue to live inside `{% block main %}`; only the chrome around them moved.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>