fix(DataAppShell): SW-2097 align collapsed sidebar divider under the icon column #153
Merged
Conversation
In the collapsed rail the header used a full-width `border-b` that ran edge-to-edge across the 60px rail, so the separator between the app icon and the nav icons sat wider than the centered icon column (SW-2097). Drop the full-width border in compact mode and render a short, centered divider (`w-8`, matching the existing nav-group dividers) so the line aligns under the icon. Expanded mode keeps the full-width header border. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
boramyi-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
Contributor
Author
|
Claude created without my knowing sorry |
The bottom user-menu slot also used a full-width `border-t` in the collapsed rail, so the separator above the avatar spanned the whole 60px rail rather than the centered icon column — the same misalignment as the header divider (SW-2097). Apply the same treatment: in compact mode render a short centered divider (`w-8 mx-auto`) above the user-menu slot and drop the wrapper's full-width border. Expanded mode keeps the full-width border. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
boramyi-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
boramyi-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||
boramyi-ts
changed the title
owilliams-tetrascience
approved these changes
Jun 24, 2026
GracePan-Tetra
approved these changes
Jun 24, 2026
Collaborator
|
🎉 This PR is included in version 0.7.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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
4 participants
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.
SW-2097 — Sidebar collapsed icons & lines don't align
In the collapsed (icon-only) rail of
DataAppShell, two separators used a full-widthborder-t/border-bthat ran edge-to-edge across the 60px rail, so they sat wider than the centered icon column and didn't line up under the icons:The nav icons themselves were already centered; it was these two lines that were off.
Fix
DataAppShell.tsx→SidebarBody, collapsed mode only:w-8 mx-auto border-t) in each spot — the same width/treatment as the existing nav-group dividers — so every line aligns under the icon column.Measured after the change: both dividers are centered at the rail midpoint (29.5px), matching the icon centers — all three divider types (header, nav-group, footer) now share one
w-8centered column.Header divider — before / after (zoomed)
Footer divider — before / after (zoomed)
Verification
yarn lint— clean (zero warnings)yarn typecheck— cleanyarn test:storybook DataAppShell— 13/13 pass🤖 Generated with Claude Code