fix(sidebar): align every row on shared glyph and label lanes - #3116
Merged
Conversation
The sidebar had five different left edges: the WORKSPACES label at 16px, workspace titles at 20px, group labels at 37px, session titles at 36px and placeholders at 44px, and a workspace title jumped 24px right whenever its loading dot-matrix appeared. Introduce `sidebar-lanes.tsx` as the single source for the two rails every row uses — a 20px glyph lane and a 44px label lane (+12px per nesting step) — and compose workspace headers, group separators, session rows, pinned and archived sections, placeholders and the account chip from it. The glyph slot is always rendered, so titles never shift when an indicator appears. `evals/flows/sidebar-lanes.flow.mjs` measures every rendered row and fails if one lands off the rails; ARCHITECTURE.md documents the rule for new rows. Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
|
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.
Problem
The sidebar had five different left edges, which is the misalignment reported:
WORKSPACESsection labelTO DO,UNGROUPED)No tasks yet.)A workspace title also jumped 24px to the right whenever its loading
dot-matrix appeared, because the glyph was only rendered while loading.
Fix
apps/app/src/react-app/domains/session/sidebar/sidebar-lanes.tsxis the newsingle source for the sidebar's two rails:
top-level
WORKSPACESlabel.labels, pinned/archived headers, placeholders, and the account name.
Workspace headers, group separators, session rows, the pinned and archived
sections, the loading placeholder and the footer account chip now compose from
SIDEBAR_ROW_LANE/SidebarGlyphSlotinstead of ad-hocps-*values, and theglyph slot is always rendered so titles never shift when an indicator appears.
Guideline + guardrail
apps/app/src/react-app/ARCHITECTURE.mddocuments the rails and the threerules for adding a sidebar row.
evals/flows/sidebar-lanes.flow.mjsmeasures every rendered row in the realapp and fails if one lands off the rails, so a new row with its own padding
cannot regress this silently.
Before / after
Tests
pnpm fraimz --flow sidebar-lanes --cdp-url http://127.0.0.1:9834— PASSED(1 passed, 0 failed) against a real Electron app; measured rows report label
lanes
20, 44only.app-sidebar.tsx— FAILED as intended,listing the off-lane rows (
WORKSPACES16,TO DO37, sessions 36), whichproves the guardrail catches the regression.
npx tsc --noEmit -p apps/app/tsconfig.json— clean.bun test tests/managed-brand-header.test.ts— 1 pass (only unit test thatrenders the sidebar).
Made with Cursor