fix(frontend): left-align the sidebar nav items on the mobile drawer
The nav buttons defaulted to centered for the desktop icon rail and were flipped back by `[data-state="expanded"]`. That attribute tracks the desktop open state, while the mobile drawer runs off `openMobile`, so on a phone the labels rendered but the override never matched: 新建对话 and 我的报告 floated mid-drawer while every other row sat flush left. Left alignment is the base layer now, correct for both the drawer and the expanded desktop sidebar, and centering moved into the >=768px collapsed block beside the rest of the rail rules. That was the only top-level `[data-state=...]` selector left in the stylesheet. personal-report-entry asserted `justify-content: center` on the report button, which is the defect itself; the value is updated and the rest of that assertion stands. BUG-438. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0155nFCgCHtoA7jhSDGmZmMu
This commit is contained in:
@@ -537,12 +537,10 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
.brand-row strong { font-weight: 400; }
|
||||
.brand-mark, .auth-brand span { width: 32px; height: 32px; border-radius: 50%; background: var(--color-canvas) url("/jyotish-logo.png") center / contain no-repeat; box-shadow: 0 0 0 1px oklch(0 0 0 / .1); }
|
||||
.auth-story-brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; box-shadow: 0 0 0 1px oklch(0 0 0 / .1); }
|
||||
.new-chat { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--sidebar-foreground); cursor: pointer; font-size: var(--type-body-sm); line-height: 1.35; transition: background-color 120ms ease-out, transform 120ms ease-out; margin: 0; border-radius: var(--radius-md); font-weight: 500; }
|
||||
.report-nav-button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); margin: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-foreground); cursor: pointer; font-size: var(--type-body-sm); font-weight: 500; line-height: 1.35; transition: background-color 120ms ease-out, transform 120ms ease-out; }
|
||||
.new-chat { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--sidebar-foreground); cursor: pointer; font-size: var(--type-body-sm); line-height: 1.35; transition: background-color 120ms ease-out, transform 120ms ease-out; margin: 0; border-radius: var(--radius-md); font-weight: 500; }
|
||||
.report-nav-button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); padding: 0 var(--space-3); margin: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-foreground); cursor: pointer; font-size: var(--type-body-sm); font-weight: 500; line-height: 1.35; transition: background-color 120ms ease-out, transform 120ms ease-out; }
|
||||
.report-nav-button:hover,
|
||||
.new-chat:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
|
||||
[data-state="expanded"] .new-chat,
|
||||
[data-state="expanded"] .report-nav-button { justify-content: flex-start; }
|
||||
.new-chat svg,
|
||||
.report-nav-button svg,
|
||||
.sidebar-label > svg,
|
||||
@@ -641,6 +639,11 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
[data-state="collapsed"] .brand-row { justify-content: center; gap: 0; padding: 0; }
|
||||
[data-state="collapsed"] [data-sidebar="menu"] { justify-items: center; }
|
||||
[data-state="collapsed"] [data-sidebar="menu-button"] { width: 44px; height: 44px; min-height: 44px; padding: 0; place-items: center; }
|
||||
/* Centering belongs to the icon rail, which only exists at this breakpoint.
|
||||
data-state tracks the desktop open state, so it must not decide layout on
|
||||
the mobile drawer — that drawer is always expanded. */
|
||||
[data-state="collapsed"] .new-chat,
|
||||
[data-state="collapsed"] .report-nav-button { justify-content: center; }
|
||||
[data-state="collapsed"] .new-chat { margin-block: var(--space-2); }
|
||||
[data-state="collapsed"] .profile-trigger { width: 44px; height: 44px; min-height: 44px; margin-inline: auto; padding: 6px; display: grid; grid-template-columns: 32px; place-items: center; }
|
||||
[data-state="collapsed"] .sidebar-footer { padding-top: var(--space-3); }
|
||||
|
||||
Reference in New Issue
Block a user