Repository navigation
feat(ui-react): ViewHeader's buttons stand at the end - #16336
Conversation
The header follows the Core reference (node 3249-48559): its buttons end the toolbar when there is one, and stand beside the title block, level with the meta line, when there isn't. ViewHeaderButton is a regular 28px Button, the toolbar's height, and the header pads 16px. This touches every ViewHeader: Lite's Details headers move their buttons from after the title to the end. A BranchWithButtons story draws but.dev's branch on its Pull Request view, as the reference has it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… story The details pane follows the Core reference (node 3249-51240): the file list and the diff each stand 12px in from the pane, their bars' buttons 12px from the top, and the first file row and the first diff card start 10px under them, level with each other. FileList's header pads 12px top and end (16px before the title, as the view header's) and its rows inset 12px instead of 8px. diffFileSpacing goes from top 8, inset 9 to top 10, inset 12, so Lite's diff bar and cards, which read it, move by those few pixels too. A Preview/Details view story puts the location bar, the view header, the file list and the diff together, for a branch with its views and a worktree without. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…s title As the Core reference (node 3249-52748): the Full message button leaves the actions for a small ghost icon button 6px after the title, which keeps its size while a long title gives way. Its tooltip names it, and it stays pressed while the body is open. The actions are now only the view's own buttons. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…tabs The buttons leave the toolbar: they stand beside the title block in every header, level with its meta line. The toolbar is the view's tabs and the commit filter alone. The branch stories go back to underline tabs, with a divider and the commit filter after them, as but.dev's branch now draws it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
check-stories wants every stories file to open with Default; the branch view is the details view's fullest sample, so it takes the name. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
This pull request changes Lite's CSS. If the change shows on screen, before/after screenshots make it reviewable without checking the branch out — drag them into a comment, or use the |
|
🎩 Your Storybook has been served
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 6ea06f9. Configure here.
| padding-inline: var(--space-3xl) var(--padding-panel); | ||
| /* The panel's 12px in from its top and end, as the diff's bar beside it; the title starts 16px | ||
| in, as the view header's above it. The rows start 10px under the buttons. */ | ||
| padding-block: var(--padding-panel) var(--space-xl); |
There was a problem hiding this comment.
Undefined padding token collapses insets
Medium Severity
FileList now sizes its header, filter field, and list inset with --padding-panel, but that variable is not declared in base.css, design-core usage in this repo, or anywhere else that ships with the change. An unresolved var() drops the whole property, so the intended 12px inset and the filter field's calc() end inset silently collapse instead of matching the diff bar.
Additional Locations (2)
Reviewed by Cursor Bugbot for commit 6ea06f9. Configure here.
🧢 Changes
ViewHeader's buttons stand at the header's end, level with the meta line, and above the tabs when the view has them.ViewHeaderButtonis a regular 28pxButton, and the header pads 16px.diffFileSpacing: top 10, inset 12), with a Preview/Details view story that puts the location bar, header, file list and diff together.☕️ Reasoning
Follows ⚛️ Core's reference (nodes 3249-48559, 3249-52748 and 3249-51240). This touches every
ViewHeader: Lite's Details headers move their buttons from after the title to the end, and Lite's diff bar and cards move by a few pixels.🤖 Generated with Claude Code
Note
Low Risk
Visual layout and spacing in ui-react components and Storybook; no auth, data, or API behavior changes.
Overview
Aligns details view chrome with Core Figma:
ViewHeaderactions move from beside the title to the trailing edge of the top row (aligned with the meta line when there is no toolbar), with 16px header padding and 28px defaultViewHeaderButtonsizing instead of the old 22px overrides.Commit “Full message” is now a small ghost icon with a tooltip 6px after the title, not an action in that trailing group.
FileListanddiffFileSpacing(top10,inset12) use the same 12px panel inset as the diff toolbar so the file list, diff bar, and cards line up.Adds Preview/Details view Storybook (
Defaultbranch +Worktree) and aBranchWithButtonsViewHeaderstory for tabs + commit filter + end actions.Reviewed by Cursor Bugbot for commit 6ea06f9. Bugbot is set up for automated code reviews on this repo. Configure here.