fix(ui): responsive shell + two-sidebar hierarchy pass#358
Merged
Conversation
Two-sidebar hierarchy: - Three-tier depth: ActivityBar → bg-tertiary (recessed rail), Sidebar bg-secondary, main bg — the two left columns now read as distinct zones instead of one undifferentiated slab. - Align the three top surfaces to a 40px header rhythm (branding h-10 px-4, was px-5 py-4 ≈ 60px); slim rail 216→200; sidebar Panel → px min/max (200/420) + preserve-pixel-size for a stable fixed-width feel. - Active nav item → bg-accent-dim (its old bg-tertiary collided with the new rail background); footer rhythm py-2→py-1.5. Responsive: - Kill the 768–1024 dead zone: add a middle tier (rail static ≥768, sidebar static ≥1024, drawer below) so the main pane keeps full-width-minus-rail and its md:-keyed content (Portfolio stat grid) no longer overflows/overlaps. - Unify mobile drawer width 216→280 (matches the secondary drawer, no drill-in jump); body scroll lock while a drawer is open; z-index ladder — dialogs z-60 / toasts z-70 above the nav drawers z-50. - Re-clicking the active rail item re-opens a hidden sidebar instead of toggling selection off (sidebarVisible). Consistency / cheap fixes: - SidebarRow: optional icon/title slots; migrate TrackedSidebar onto it. - code-copy hover → --color-overlay-strong (was invisible in light); PageHeader → .text-title; responsive grid + dialog widths on News / Quote / AIProvider / Dialog. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
bg-tertiaryrecessed rail → Sidebarbg-secondary→ mainbg) so the two columns stop reading as one slab; align the three top surfaces to a 40px header rhythm (branding waspx-5 py-4≈ 60px, nowh-10); slim rail 216→200; sidebar Panel switched to px min/max (200/420) +preserve-pixel-size.md:-keyed content (the Portfolio stat grid that was literally overlapping at 768px) no longer collides; unify mobile drawer width 216→280 (matches the secondary drawer, no drill-in jump); body-scroll-lock while a drawer is open + z-index ladder (drawers z-50 / dialogs z-60 / toasts z-70); re-clicking the active rail item re-opens a hidden sidebar instead of toggling selection off.SidebarRowgains optional icon/title slots andTrackedSidebaris migrated onto it; active nav item usesbg-accent-dim(its oldbg-tertiarycollided with the new rail bg); code-copy hover uses--color-overlay-strong(was invisible in Daybreak);PageHeader→.text-title; responsive grid/dialog-width one-liners on News / Quote / AIProvider / Dialog.Verified in the demo build (MSW) across 375 / 768 / 1000 / 1024 / 1440 / 1920 in both Daybreak and Midnight.
Test plan
cd ui && npx tsc -bcleanBoundary touch
None — UI-only (no trading / auth / broker credentials / migrations).
🤖 Generated with Claude Code