Repository navigation
Make the sidebar brand a pill and round wrapped tab bars - #432
Merged
Merged
Conversation
The brand hover and the sidebar user action kept 0.375rem corners after the shell moved to pills and circles. The brand is now a pill on the laptop sidebar and phone drawer (the collapsed rail was already a circle), and the user action is a circle. On phones the Administration tabs and the MCP client tabs wrap to two rows, where a 999px track reads as a blob. Both now drop to concentric rounded rectangles once they wrap, as the Settings tab bar already does.
The toggle sat at a fixed offset from the top, a few pixels above the middle of the brand pill. Its insets now match the header padding and auto margins centre it on the brand row, on laptop and in the phone drawer.
TestSidebarListFitsALaptopHeightWindow matches the padding rule verbatim, so the containing block for the toggle gets its own rule.
drudge
added a commit
that referenced
this pull request
Oct 12, 2026
drudge
enabled auto-merge
October 12, 2026 00:52
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.
Requested by Nick · project thread
Before: the sidebar brand block still hovered as a 0.375rem rounded rectangle after #427 and #429 moved the shell to pills and circles, and so did the sidebar user action. On phones, the Administration tabs and the MCP client tabs wrap to two rows inside a 999px track, which turns into a blob.
After: the brand hover is a pill on the laptop sidebar and in the phone drawer (the collapsed rail was already a circle), and the user action is a circle. The collapse toggle now sits centred on the brand row instead of a few pixels high. Once the Administration and MCP tab bars wrap, the track and tabs drop to concentric rounded rectangles (1rem track, .75rem tabs), the same thing the Settings tab bar already does. One-row tab bars stay pills.
How: CSS only in
app.css. The toggle's top and bottom insets match the header padding, and auto margins centre it on the brand row. A sweep of every console page at 340, 390 and 768px found no other pill taller than one row.Sidebar brand (hovered)
Collapsed rail brand (hovered, unchanged)
Phone drawer brand (hovered)
Administration tabs on phone
MCP client tabs on phone