Repository navigation
Fix sidebar alignment and synchronized divider feedback - #69
Merged
Merged
Conversation
- Center nav, workspace and session leading icons instead of left-aligning them so the 24px slots share one optical baseline. - Replace the fixed 76px trailing column with `auto` and drop the fixed width on count/time slots, so rows no longer reserve dead space. - Move the section disclosure arrow next to the section title and keep it always visible; the header becomes a single full-width button with pt-3/pb-1 padding instead of the previous group-hover reveal. - Rebuild the collapsed arrow rotation from -90deg to 0deg. - Tighten row padding, list gaps and the brand row spacing; update sidebarAlignmentArchitecture.test.js to assert the new contract.
Running sessions in the sidebar used a bespoke 12-dot "abstract A" matrix while the conversation used the ace-spinner ring, so the same state read as two different icons. Reuse the chat's spinner in the session row. - SessionAttentionIndicator renders the same `ace-spinner h-3 w-3` markup as ActivityLine and keeps the status role, label and title. - Drop the now-unused .ace-session-loading/-matrix/-dot rules, the dot-pulse keyframes and the dot reduced-motion block. - Remove web/scripts/check-session-loading-motion.py, which only asserted the removed dot matrix and is not wired into any task. - permissionSidebarArchitecture.test.js now requires the shared spinner and rejects any ace-session-loading leftover.
The topbar navigation block is sized as sidebar - leading-inset - 4px, but it starts at the topbar's own 8px padding while --ace-topbar-leading-inset was 19px. The block therefore ended 11px early, leaving the session title 3px to the left of the sidebar border painted by .ace-topbar::before, i.e. flush on the line and visibly cramped. Set the inset to the topbar's real left padding (8px), matching the macOS frameless override, which already pairs an 80px padding with an 80px inset. The title now clears the border by 8px on every surface. sidebarAlignmentArchitecture.test.js asserts the inset and the topbar padding stay equal and that the title's own padding still clears the border.
…ar border The navigation block exists only to push the session title past the sidebar border, so any cap below sidebar - inset - 4px drags the title back onto it. max-width: 35vw did exactly that: with a 360px sidebar the title landed up to 116px left of the border once the window dropped under ~994px. The max-width: 640px breakpoint reproduced the same overlap, and its padding-left: 0 put the title 4px inside the border. Drop both. Neither was the overflow guard: the title (flex-1 with min-w-0) truncates to zero before anything else shrinks, and the navigation block keeps min-width: 116px plus flex-shrink: 1 for rows that genuinely cannot fit. The title now sits a constant 8px right of the border at every window width. sidebarAlignmentArchitecture.test.js rejects a max-width on the navigation block and any second .ace-topbar-session-title rule.
…r blocks - globals.css: reserve a stable scrollbar gutter on .ace-sidebar-scroll and .ace-file-tree. Revealing rows when the active session changes used to push the list past the viewport, and the 12px custom scrollbar then stole 12px of content width, shifting the whole list sideways. - Sidebar.jsx: the section header hover block now matches workspace rows (mx-1.5 inset, py-[3px] row height, rounded-md) while the label keeps its absolute position; container padding compensates so section rhythm is intact. - sidebarAlignmentArchitecture.test.js: update the section header assertions and pin the shared hover-block geometry. Verified with node src/lib/runTests.js (2725 pass), vite build and check-regex-compat; measured block geometry in the running app before and after switching sessions.
Merged
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
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.
Sidebar rows and section hover areas now share consistent alignment, the task list keeps a stable width when its scrollbar appears, and the topbar title stays clear of the sidebar divider. Running tasks reuse the conversation spinner.
The sidebar divider now moves as one continuous edge. Its hover and focus highlights use the same filled strip above and below the titlebar boundary, fixing mismatched thickness at fractional display scales. The extensions flyout/customizer and workspace disclosure, add, and collapse-all actions remain available.
Validation:
pnpm test,pnpm build, andgit diff --checkpassed on the merged tree.