Skip to content

fix(react-ui): collapsed-sidebar open button could become unreachable (reveal keyed to animation state) #809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ankit-thesys merged 4 commits into from
Jul 23, 2026
Merged

fix(react-ui): collapsed-sidebar open button could become unreachable (reveal keyed to animation state) #809

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e0fe0a3
style(react-ui): update sidebar styles for logo and toggle button int…
i-subham23 Jul 22, 2026
7bbeea0
style(react-ui): enhance sidebar logo and toggle button visibility logic
i-subham23 Jul 22, 2026
9bd2c42
style(react-ui): refine sidebar hover behavior for logo and toggle bu…
i-subham23 Jul 22, 2026
455fe2c
fix(react-ui): key collapsed-sidebar reveal to layout class; add keyb…
ankit-thesys Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions packages/react-ui/src/components/AgentInterface/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,11 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep;
left: 0;
}

.openui-agent-sidebar-header__toggle-button {
// Hide the toggle button at rest ONLY when a logo fills the slot (detected
// with :has) — 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, keeping the open control discoverable.
&:has(.openui-agent-sidebar-header__logo) .openui-agent-sidebar-header__toggle-button {
opacity: 0;
pointer-events: none;
}
Expand Down Expand Up @@ -203,7 +207,14 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep;
}
}

.openui-agent-sidebar-container[data-sidebar-visual-state="collapsed"]:hover {
// Collapsed rail: logo at rest, open button on hover or keyboard focus. Key off
// the binary --collapsed class (the same isCollapsedLayout state that hides the
// button above), never data-sidebar-visual-state — its transitional values open
// a window where the button is hidden but cannot be revealed. Keyboard focus is
// matched via :focus-visible so the residual focus a mouse click leaves on the
// toggle doesn't pin the button over the logo at rest.
.openui-agent-sidebar-container--collapsed:hover,
.openui-agent-sidebar-container--collapsed:has(:focus-visible) {
.openui-agent-sidebar-header__logo {
opacity: 0;
pointer-events: none;
Expand All @@ -215,6 +226,23 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep;
}
}

// No hover on touch devices: show the open button at rest instead of the logo.
// The header class keeps specificity equal to the :has() hide rule above so
// source order lets this win.
@media (hover: none) {
.openui-agent-sidebar-container--collapsed {
.openui-agent-sidebar-header__logo {
opacity: 0;
pointer-events: none;
}

.openui-agent-sidebar-header--collapsed .openui-agent-sidebar-header__toggle-button {
opacity: 1;
pointer-events: auto;
}
}
}

.openui-agent-sidebar-container__overlay {
position: absolute;
left: 0;
Expand Down
Loading