fix(ui): restore shell-nav + sidebar-shell wrappers (#2517)#2518
Merged
alexey-pelykh merged 1 commit intomainfrom Apr 24, 2026
Merged
fix(ui): restore shell-nav + sidebar-shell wrappers (#2517)#2518alexey-pelykh merged 1 commit intomainfrom
alexey-pelykh merged 1 commit intomainfrom
Conversation
…sidebar — sidebar markup mismatch with upstream CSS after #2501 migration (#2517) After #2501 / #2509 adopted upstream's `.sidebar` / `.nav-section` class vocabulary, the sidebar nav was clipped to a single group header on deployed builds. Upstream's `.sidebar` rule is designed to be wrapped in `.shell-nav` (grid-area: nav) and to internally use `.sidebar-shell` (the flex container that gives `.sidebar`'s `flex: 1` something to fill) with a scrollable `.sidebar-nav` child. The fork adopted the class names but not the markup hierarchy, so `<aside class="sidebar">` was auto-placed into the wrong grid cell and `overflow: hidden` clipped the nav-sections. Wrap `<aside class="sidebar">` in `<div class="shell-nav">` and restructure internal hierarchy as `<div class="sidebar-shell"><div class="sidebar-shell__body"><nav class="sidebar-nav">...</nav></div></div>`. No CSS changes — the rules already exist in layout.css; only the markup was out of sync. Optional upstream improvements (moving brand into `.sidebar-shell__header`, semantic `<section>` tags, and a `.nav-section--links` modifier class) deferred — not required for the regression fix and the `.nav-section--links` class has no CSS rule (would fail the #2503 css-class-drift gate). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
<aside class="sidebar">inui/src/ui/app-render.tsto fix sidebar clipping on deployed builds after fix(ui): restore nav-section/topbar class names after v2026.3.13-1 sync — paired call-site update missed #2501 / fix(ui): migrate app-render nav + theme-toggle to upstream sidebar + theme-orb — residual v2026.3.13-1 drift after #2501 #2509 migrations adopted CSS class names but not markup structure.<aside>in<div class="shell-nav">and restructures contents as<div class="sidebar-shell"><div class="sidebar-shell__body"><nav class="sidebar-nav">...</nav></div></div>.ui/src/styles/layout.css.Rationale
Before the fix,
.sidebar'sflex: 1had no flex parent (missing.shell-nav) and.sidebar-nav'soverflow-y: autowas absent, so<aside class="sidebar">was auto-placed into the wrong CSS grid cell and nav-sections were clipped byoverflow: hidden— only the CHAT group header was visible. Topbar-right (Health/Version pills, theme toggle) and chat panel content were also missing as side-effects of the broken grid occupancy.CSS rules (
.shell-nav@ layout.css:311,.sidebar-shell@ :338,.sidebar-shell__body@ :370,.sidebar-nav@ :423) were already present in the repo — only the render markup was out of sync.Design notes
Minimum-viable fix. Optional upstream improvements explicitly deferred:
.sidebar-shell__header— non-minimal, out of scope for regression fix.<section>semantic swap for<div class="nav-section">— optional per issue body..nav-section--linksmodifier on Resources section — REJECTED: class has no CSS rule in the repo and would fail the feat(ci): CSS class consistency build-time gate — fail build on undefined class references #2503 css-class-drift gate.Test plan
pnpm tsgo: clean (no output)pnpm check: pass — format:check 5110 files OK, oxlint 0 warnings / 0 errors on 3926 files, css-class-drift 0 orphans / 0 clusters (all new wrapper classes resolve to layout.css rules)pnpm canvas:a2ui:bundle: built successfullypnpm test: 7014 passed / 3 skipped / 0 failed across 800 test filesFixes #2517
🤖 Generated with Claude Code