cloud/project-manager
3
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Inset the sidebar and size it to the screen

Browse Source 
The sidebar sat flush against the window edge and the header, with the main
content floating with its own margin -- visually unbalanced. .app__body now
carries the outer spacing (1.5rem top/bottom, 1.25rem sides, 1.5rem gap
between sidebar and main) that .app__main used to own alone, so both columns
start at the same position and read as a matched pair. The sidebar is now a
floating panel to match (full border + border-radius, not just a right edge).

The sidebar's height is set explicitly -- calc(100vh - 6.0625rem), tuned to
the app's actual ~3.0625rem header plus a 1.5rem gap top and bottom -- rather
than capped, so it fills the screen height even when its own content (project
dropdown, inbox) is short, with room to spare at the bottom instead of
overflowing past the fold. Its sticky `top` matches the outer top gap so that
gap holds once it starts sticking during a scroll.

Verified via headless Chrome at a couple of viewport heights and on both a
narrow (Profile) and wide (Dashboard) page: sidebar and main content start
level, the sidebar is inset ~1.25rem from the window edge, and its box ends
with a ~1.5rem gap above the viewport bottom rather than touching or
overflowing it. Confirmed the sticky behavior while scrolling a long project
page holds the same 1.5rem gap once pinned.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
aneurin
2026-09-04 15:41:27 +01:00
co-authored by Claude Sonnet 5
parent d8a4183e4d
commit 7504bd826d
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style.css
+14 -7
View File
@@ -71,33 +71,40 @@ body {
.app__body {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1.5rem 1.25rem;
}
.app__main {
flex: 1;
min-width: 0;
max-width: 32rem;
margin: 2.5rem auto;
padding: 0 1.25rem;
margin: 0 auto;
}
/* Full-bleed layout for views that need the room (e.g. the project board). */
.app__main--wide {
max-width: none;
margin: 1.5rem auto;
margin: 0;
}
/* --- left sidebar (signed-in app pages) ------------------------------ */
.sidebar {
flex: 0 0 15rem;
align-self: stretch;
align-self: flex-start;
position: sticky;
top: 0;
max-height: 100vh;
/* Matches .app__body's top padding, so the gap holds once it starts sticking. */
top: 1.5rem;
/* Fill the screen height: viewport minus the header (~3.0625rem, .app__bar's
padding + line height + border) and a matching 1.5rem gap top and bottom.
Not just a cap -- short content leaves room at the bottom of the panel,
long content scrolls internally. Re-tune if .app__bar's height changes. */
height: calc(100vh - 6.0625rem);
overflow-y: auto;
padding: 1rem 0.75rem 1.5rem;
border-right: 1px solid var(--border);
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}