Clean up the ledger bookmark tab: alignment, shadow, icon-only design#386
Merged
Conversation
- Center the tab content: compensate for the 1px of the tab that rides on the panel border, and nudge the vertical-rl label's glyph ink left to optically center it under the chevron. - Move the track to -30px so the tab's right edge lands exactly on the panel border instead of overhanging 1px into the panel interior. - Replace the hard-coded drop-shadow with var(--shadow): the tab is a persistent surface, so separation comes from the hairline border. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The tab bg (--color-surface) and panel bg (--panel-bg) are different surfaces, so covering the border hairline showed a color seam; sit the tab fully outside the border instead and let the hairline double as the tab's right edge. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Tab now shows a single icon per state: the sidebar's identity glyph (History, via new sidebarGlyph prop) when closed, a collapse icon when open — replacing the chevron + vertical text label and its font-metric alignment quirks. - Sit the tab fully outside the panel border instead of covering it: the tab bg and panel bg are different surfaces, so overlapping showed a color seam; the hairline now doubles as the tab's right edge. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
isundaylee
changed the title
Generous vertical padding around the lone icon so the tab reads as a bookmark riding the border rather than a floating square button. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
isundaylee
commented
Jul 11, 2026
| sidebarSizing?: 'fit' | 'fill' | ||
| // Accessible name for the mobile drawer toggle button (and visible label for | ||
| // the desktop bookmark tab). | ||
| // Accessible name for the mobile drawer toggle button and the desktop |
Owner
Author
There was a problem hiding this comment.
If it's just an accessible name, should it still be a React node type?
Owner
Author
There was a problem hiding this comment.
Also, is this even used anymore?
Owner
Author
There was a problem hiding this comment.
Still used — it's the aria-label for both the mobile drawer toggle and the desktop tab, and gates rendering the drawer toggle. But with the visible label gone there's no reason for ReactNode: tightened to string and dropped the typeof checks in 5bc76ac.
It is only an accessible name now that the tab is icon-only; still used for the drawer toggle / tab aria-labels and the toggle's render gate. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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.
What & why
Cleans up the history-sidebar bookmark tab (
.ledgerTabinPageShell), which looked misaligned and visually inconsistent:writing-modetext label never centered cleanly (vertical-rl places glyph ink by font vertical-origin metrics, which vary per platform font). The tab now shows a single icon per state: the sidebar's identity glyph when collapsed (aHistoryicon, passed by the call site via the newsidebarGlyphprop) and a collapse icon when expanded. The collapse icon is the right-pointingPanelLeftOpenglyph on purpose: collapsing moves the panel's left edge rightward, so lucide's left-pointing "close" variant read reversed..ledgerTabTrack's oldleft: -29pxis relative to.split, which starts at the inner edge of the panel's 1px border — the 30px tab poked 1px past the border into the panel interior. Now-31px: the tab sits fully outside, flush against the border, and the hairline stays visible, doubling as the tab's right edge (tab bg and panel bg are different surfaces, so covering the border showed a color seam).box-shadow: -1px 0 4px rgba(0,0,0,0.1)that smeared onto the panel interior and contradicted the design system (--shadow: nonefor persistent surfaces; hairline borders provide separation). Nowbox-shadow: var(--shadow)likeCard/Navigation.Testing
pre-commit runpasses (eslint, tsc, stylelint, no-hardcoded-colors).🤖 Generated with Claude Code