Skip to content

Sidebar: line up every session row in one column - #682

Open
GrigoryPervakov wants to merge 2 commits into
mainfrom
pervakovg/sidebar-tree-alignment
Open

GrigoryPervakov wants to merge 2 commits into
mainfrom
pervakovg/sidebar-tree-alignment

Conversation

@GrigoryPervakov

@GrigoryPervakov GrigoryPervakov commented Nov 11, 2026 •

Copy link
Copy Markdown
Member

Why

A sidebar row with children puts its expand chevron in front of its icon; a row without children has nothing there. At the same depth a parent's icon and title start 19px to the right of its siblings', and a child's title starts 3px left of its parent's, so the nesting shows only in the chevrons. It is most visible under chats that hold forks, next to plain chats at the top level.

What

  • ExpandSlot: an empty box the size of the chevron button. Every session row without children reserves it: tree rows, search results, archived, System, the new-chat row and the rename row.
  • Icons and titles share one column, and each level indents 16px. Same approach as Files/FileTree.tsx, where file rows pad by the chevron's width.
  • The rename row keeps the row's depth indent, so a nested row no longer moves left while it is renamed.
Before After
before after

Made-up chats.

Notes

  • Every row's title is 19px narrower.
  • Origin icons are unchanged; a fork keeps its branch icon.

Testing

  • npm run build, npm test (1911 passed). No new test: the change is layout only.
  • Measured in the dev UI: every top-level title starts at the same x (parents, plain chats, Today, System, New chat), and every nested title 16px further, with or without children.
  • Running on one instance since 2026-11-11.

🤖 Generated with Claude Code

A row with children puts its expand chevron in front of its icon and a
row without children had nothing there, so at the same depth a parent's
icon and title sat 19px right of its siblings', and a child's title
started left of its parent's.

- Every session row without children reserves the chevron's box
  (ExpandSlot): tree rows, search results, archived, System, the new-chat
  row and the rename row. Icons and titles share one column and each
  level indents 16px, as file rows do in Files/FileTree.tsx.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@nerveai

nerveai commented Nov 11, 2026 •

Copy link
Copy Markdown

Nerve PR review · ✅ Ready to merge

This fixes a real misalignment in the sidebar: only rows with children had a chevron, so parent titles sat 19px right of their siblings' and children's titles sat left of their parent's. ExpandSlot reserves the chevron's exact footprint, 17px wide with the button's -ml-0.5 -mr-1 margins (SessionSidebar.tsx:1268). With it, the existing 12 + depth * 16 padding (:1257) becomes a clean 16px per level. Every row path gets the slot: the feed tree, search, archived, System (:799), new chat (:650) and rename (:1213).

Completeness: a layout-only change in one file; no test expected (jsdom does not measure layout). It merges cleanly, and no other open PR touches the file.

Worth considering:

  • The rename row (:1212) is now the only row that ignores depth, so a nested row jumps left while it is renamed. Applying :1257's paddingLeft there would fix it. Not blocking.

Checked: web sandbox at e194723: build OK, Vitest 141 files / 1911 tests passed. No backend tests reach this change (affected_tests.py). CI: 4/5 green, backend job still running · automated review by nerveai — mention @nerveai to ask a follow-up.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants