Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Compact account chip in mobile nav dropdown (#123)

Browse source 
The account button in the hamburger dropdown spanned the full panel width,
so a signed-in user's email rendered as a large centered bar dominating the
menu. Make it a compact chip that hugs its label and centers beside the bell
instead: drop the full-width/flex rules, tighten the button padding, and cut
the name truncation from 16ch to 12ch. The 40px min-height stays for the tap
target.
This commit is contained in:
Emi Griffith 2026-07-16 08:45:43 -07:00 committed by GitHub
parent 5a0329e90e
commit ca4d8035a9
1 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
static/style.css
View file

@ -1385,12 +1385,14 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
.nav-panel > .unit-toggle { margin: 0; width: 100%; align-self: stretch; }
.nav-panel > .unit-toggle button { flex: 1; }
/* Account row (bell + account/Sign in) spans the dropdown; the account button
keeps its label and fills, the bell stays a fixed square. Popovers open below,
clamped to the viewport so the notification list never overflows. */
.nav-panel > .acct { margin: 0; width: 100%; align-self: stretch; }
.nav-panel > .acct .acct-menu { flex: 1; }
.nav-panel > .acct .acct-btn:not(.notif-btn) { width: 100%; justify-content: center; }
/* Account row (bell + account/Sign in): a compact chip that hugs its label and
sits beside the bell, centered in the dropdown, rather than a full-width bar.
The 40px min-height stays for the tap target; padding and truncation tighten
so the long email no longer dominates. Popovers open below, clamped to the
viewport so the notification list never overflows. */
.nav-panel > .acct { margin: 0; width: 100%; align-self: stretch; justify-content: center; }
.nav-panel > .acct .acct-btn:not(.notif-btn) { padding: 8px 10px; }
.nav-panel > .acct .acct-name { max-width: 12ch; }
/* The bell's notification list would anchor to the small bell button and spill
off the left edge; drop .notif's positioning context so it anchors to the
panel instead — dropping below the menu, right-aligned and within the