danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 16 Packages Wiki Activity Actions

fix: the account menu was clipped by the collapsed rail, and sat at two heights

Browse source 
.sidebar sets overflow:hidden and the collapsed rail is 52px wide, so the account
menu — laid out inside it — was cut to a sliver. Settings, FAQ and Log out became
unreachable behind the avatar exactly when the rail is narrow, which is the state
the screenshot shows. The collapsed menu is now positioned against the viewport
instead of the rail, so it cannot be clipped by the thing that opens it.

The card also sat lower in the assistant than in the app: the app column pads its
bottom and the assistant rail only padded the top. Both now use the same vertical
padding and the same row height, so the card lands on one baseline in either
view.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0161xNW1z4vPusrXKGWcQdQu
This commit is contained in:
Daniel 2026-09-10 10:27:25 +02:00
parent 2c9c2d12c0
commit 924ce8716c
2 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/css/styles.css
View file

@ -1310,7 +1310,10 @@ body.menu-hidden .menu-brand { gap:0; }
body.menu-hidden .menu-brand i { font-size:18px; }
body.menu-hidden .account-card { padding:8px 0; }
body.menu-hidden .account-card-btn { justify-content:center; padding:6px 0; }
body.menu-hidden .account-menu { left:8px; right:auto; width:210px; }
/* The collapsed rail is 52px and .sidebar clips its overflow, so a menu laid out
inside it is cut off — which hid Settings, FAQ and Log out behind the avatar.
Fixed positioning takes it out of that box entirely. */
body.menu-hidden .account-menu { position:fixed; left:56px; right:auto; bottom:12px; width:210px; }
/* The assistant rail collapses to the same strip rather than to nothing. */
body.assistant-workspace.menu-hidden .assistant-layout { grid-template-columns:52px minmax(0,1fr) 330px; }
@ -1337,7 +1340,10 @@ body.assistant-preview .assistant-preview-note { display:flex; }
Ends both menus identically. Settings, FAQ, Admin and Log out were unlabelled
icon buttons in the old header; the slim bar has no room to explain them. */
.sidebar-nav { padding-bottom:0; }
/* Identical in both rails: same padding, same border, same height — the assistant
card sat lower because only the app column had bottom padding. */
.account-card { position:relative; margin-top:auto; border-top:1px solid var(--g200); padding:8px; }
.account-card-btn { min-height:44px; }
.account-card-btn { display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border:none; border-radius:10px; background:none; cursor:pointer; text-align:left; font-family:inherit; }
.account-card-btn:hover, .account-card-btn[aria-expanded="true"] { background:var(--g100); }
.account-avatar { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; background:var(--blue); color:white; font-size:11px; font-weight:700; letter-spacing:.02em; }
@ -1352,7 +1358,7 @@ body.assistant-preview .assistant-preview-note { display:flex; }
.account-menu-item i { width:16px; text-align:center; color:var(--g400); font-size:12px; }
.account-menu-item:hover i { color:var(--blue); }
/* The rail is a flex column, so the card needs the same push to the bottom. */
.assistant-history .account-card { margin-top:auto; padding:8px 0 0; }
.assistant-history .account-card { margin-top:auto; padding:8px 0; }
/* Collapsed menus hide their contents; the card goes with them. */
/* A preview visitor has no account to show. */
body.assistant-preview .account-card { display:none; }

24
test/assistant-mobile.test.js
View file

@ -57,3 +57,27 @@ test('the mobile menu is sized for a thumb', () => {
assert.match(mobile, /\.tab-btn\{ padding:12px 10px; font-size:14\.5px/, 'rows are tappable');
assert.match(mobile, /env\(safe-area-inset-bottom\)/, 'and clear of the home indicator');
});
test('the account menu escapes the collapsed rail instead of being clipped', () => {
const css = read('public/css/styles.css');
// .sidebar has overflow:hidden and the collapsed rail is 52px, so a menu laid
// out inside it was cut to a sliver — hiding Settings, FAQ and Log out behind
// the avatar exactly when the rail is narrow.
const sidebar = css.split('\n').find(l => l.startsWith('.sidebar{'));
assert.match(sidebar, /overflow:hidden/, 'the rail does clip, so the menu must escape it');
assert.match(css, /body\.menu-hidden \.account-menu \{ position:fixed;/,
'the collapsed menu is positioned against the viewport, not the rail');
assert.match(css, /body\.menu-hidden \.account-menu \{[^}]*width:210px/, 'and keeps a readable width');
});
test('the account card sits at the same height in both rails', () => {
const css = read('public/css/styles.css');
// The app column pads its bottom; the assistant rail did not, so its card
// started lower than the app's.
const app = css.split('\n').find(l => l.startsWith('.account-card {'));
const assistant = css.split('\n').find(l => l.startsWith('.assistant-history .account-card {'));
assert.match(app, /padding:8px;/);
assert.match(assistant, /padding:8px 0;/, 'same vertical padding, so the cards align');
assert.match(css, /\.account-card-btn \{ min-height:44px; \}/,
'and the same row height in both');
});