etalon/BountyBoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: long brand name no longer overflows the sidebar

Browse Source 
In sidebar mode the masthead brand was white-space:nowrap and overflowed the
214px rail for longer names. Constrain it to the rail width and let it wrap;
bump the link list's top padding so a two-line brand doesn't overlap.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
etalon
2026-06-13 12:36:16 +02:00
parent c65aeb4bac
commit 88fa5d19c8
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/app.css
+8 -3
View File
@@ -311,8 +311,12 @@ body[data-nav=side] .topnav {
padding-left: 232px; padding-left: 232px;
} }
body[data-nav=side] .topnav .brand { body[data-nav=side] .topnav .brand {
position: fixed; top: 14px; left: 18px; z-index: 41; position: fixed; top: 14px; left: 16px; z-index: 41;
font-size: 1.05rem; font-size: 1rem;
/* keep a long brand name inside the sidebar instead of overflowing it */
width: 182px;
white-space: normal;
line-height: 1.15;
} }
body[data-nav=side] .topnav .links { body[data-nav=side] .topnav .links {
position: fixed; top: 0; left: 0; bottom: 0; position: fixed; top: 0; left: 0; bottom: 0;
@@ -322,7 +326,8 @@ body[data-nav=side] .topnav .links {
background-color: var(--surface2); background-color: var(--surface2);
background-image: var(--dither); background-image: var(--dither);
border-right: 2px solid var(--border); border-right: 2px solid var(--border);
padding: 58px 12px 18px; /* top padding clears the (possibly two-line) brand above */
padding: 76px 12px 18px;
overflow-y: auto; overflow-y: auto;
z-index: 40; z-index: 40;
} }