fix(react-ui): collapsed-sidebar open button could become unreachable (reveal keyed to animation state) - #809
Merged
Merged
Conversation
…eraction - Adjusted opacity and pointer-events for the sidebar logo and toggle button to improve user interaction. - Removed redundant hover styles for collapsed sidebar state, streamlining the CSS for better maintainability.
ankit-thesys
changed the title
- Updated sidebar styles to conditionally hide the toggle button when a logo is present, improving user experience. - Added hover styles to ensure the toggle button appears only after the collapse animation, addressing the no-logo case (TH-2392).
i-subham23
force-pushed
the
fix/sideber_icon_visibility
branch
from
July 22, 2026 10:53
ac55d61 to
7bbeea0
Compare
…tton - Removed outdated comments and streamlined the hover styles for the collapsed sidebar state. - Ensured the toggle button visibility logic is clear and maintains user experience during collapse animations.
…oard and touch reveal Keep the :has(logo) resting-face rule, but reveal the open button via the binary --collapsed layout class instead of data-sidebar-visual-state — the attribute's transitional values open a window during the collapse animation where the button is hidden but hovering cannot reveal it. Also reveal on keyboard focus (:has(:focus-visible), so residual click focus doesn't pin the button over the logo) and show the button at rest on hover-less (touch) devices via @media (hover: none). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XECS4NLhz6BNd1TUYbWjfu
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.
Fixes the "open sidebar icon is randomly not visible" bug and keeps the collapsed rail's logo/button hover swap.
Problem
The collapsed rail hides the open button via the header's
--collapsedclass (binary, driven byisCollapsedLayout), but the hover rule that reveals it keyed off[data-sidebar-visual-state="collapsed"]— a four-state animation attribute (expanded → collapsing → collapsed → expanding) advanced by chained timeouts. During the collapse animation the attribute still reads"collapsing", so hovering revealed nothing (~170ms measured on every collapse, with the button visibly fading out under the cursor); and if the timeout chain is interrupted (rapid toggling, layout switches), the attribute can strand there — a collapsed rail whose open button can never be revealed. That's the randomness.Change
All in
sidebar.scss; behavior::has): with a logo configured, the logo is the resting face and the button appears on hover; with no logo the slot is empty, so the button stays visible at rest instead — the open control is always discoverable..openui-agent-sidebar-container--collapsed— the same binaryisCollapsedLayoutstate as the hiding rule, set in the same render — so hidden-but-unrevealable is impossible by construction.:has(:focus-visible), so tabbing never lands on an invisible button. (:focus-visiblerather than:focus-within, so the residual focus a mouse click leaves on the toggle doesn't pin the button over the logo at rest.)@media (hover: none)shows the open button at rest on touch devices, which have no hover to trigger the swap.Test Plan
logoUrl:"collapsing") keeps the button fully visible — zero dead-window sampleshover: noneshows the button at rest