fix(folder-nav): de-emphasize inactive tabs on small screens#2925
Open
cqnykamp wants to merge 2 commits into
Open
fix(folder-nav): de-emphasize inactive tabs on small screens#2925cqnykamp wants to merge 2 commits into
cqnykamp wants to merge 2 commits into
Conversation
On mobile (horizontal layout), the left-border active indicator was invisible and all tabs looked the same. On small screens: - Switch the active indicator from left-border to bottom-border so it aligns with the horizontal row orientation - Set inactive tab opacity to 0.5 to clearly de-emphasize them - Fix button width/marginLeft so they are responsive (auto on mobile, full-width with left-indent on md+) - Add a borderBottom to the panel on small screens to visually separate navigation from content (mirrors the borderRight already used on md+) Adds a Cypress component test covering nav rendering, aria-current attributes, and the responsive opacity behaviour. https://claude.ai/code/session_01J33yqSc58jjoXqENN2bcEs
Contributor
Author
|
@cqnykamp — this PR addresses issue #2672. CI is running; could you review when it's green? Happy to adjust the opacity value or border style if a different visual treatment would work better. Generated by Claude Code |
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
2 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.
$(cat <<'EOF'
Summary
Fixes #2672 — on small screens the folder navigation panel renders as a horizontal row of tabs, but the existing active indicator (a left border) is invisible in that orientation, making it unclear which tab is currently active.
Changes
borderLeft(works in vertical list) toborderBottom(correct for horizontal row)opacity: 0.5on inactive tabs atbasebreakpoint so the active tab stands out clearly; reverts toopacity: 1atmd+where a left-border already distinguishes the selectionborderBottomto the navigation panel itself on small screens (mirrors theborderRightalready used atmd+) to visually separate navigation from page contentwidthandmarginLeftto be responsive —autoon small screens (correct for a horizontal row) vs.100%/calc(100%-4px)onmd+(correct for a vertical list)Tests
Adds
FolderContext.cy.tsx(Cypress component tests,@group1):aria-current="page"is set on the active tab and absent from inactive tabs for all three routesopacity: 1, inactive tabs haveopacity: 0.5opacity: 1Test plan
https://claude.ai/code/session_01J33yqSc58jjoXqENN2bcEs
EOF
)
Generated by Claude Code