From e0fe0a3fbaa9a681f571fa1b9231efca1d9e07c8 Mon Sep 17 00:00:00 2001 From: i-subham Date: Wed, 22 Jul 2026 13:09:44 +0530 Subject: [PATCH 1/4] style(react-ui): update sidebar styles for logo and toggle button interaction - 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. --- .../components/AgentInterface/sidebar.scss | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/react-ui/src/components/AgentInterface/sidebar.scss b/packages/react-ui/src/components/AgentInterface/sidebar.scss index 91da1d6c0..041adbf95 100644 --- a/packages/react-ui/src/components/AgentInterface/sidebar.scss +++ b/packages/react-ui/src/components/AgentInterface/sidebar.scss @@ -156,11 +156,15 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep; top: 0; left: 0; } - - .openui-agent-sidebar-header__toggle-button { + .openui-agent-sidebar-header__logo { opacity: 0; pointer-events: none; } + + .openui-agent-sidebar-header__toggle-button { + opacity: 1; + pointer-events: auto; + } } } @@ -203,18 +207,6 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep; } } -.openui-agent-sidebar-container[data-sidebar-visual-state="collapsed"]:hover { - .openui-agent-sidebar-header__logo { - opacity: 0; - pointer-events: none; - } - - .openui-agent-sidebar-header__toggle-button { - opacity: 1; - pointer-events: auto; - } -} - .openui-agent-sidebar-container__overlay { position: absolute; left: 0; From 7bbeea0ce1a5c51bdc23957a06ee510938c2bd9a Mon Sep 17 00:00:00 2001 From: i-subham Date: Wed, 22 Jul 2026 16:22:51 +0530 Subject: [PATCH 2/4] style(react-ui): enhance sidebar logo and toggle button visibility logic - 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). --- .../components/AgentInterface/sidebar.scss | 31 +++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/react-ui/src/components/AgentInterface/sidebar.scss b/packages/react-ui/src/components/AgentInterface/sidebar.scss index 041adbf95..f9a2bdedb 100644 --- a/packages/react-ui/src/components/AgentInterface/sidebar.scss +++ b/packages/react-ui/src/components/AgentInterface/sidebar.scss @@ -156,15 +156,15 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep; top: 0; left: 0; } - .openui-agent-sidebar-header__logo { + + // 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 (TH-2392). + &:has(.openui-agent-sidebar-header__logo) .openui-agent-sidebar-header__toggle-button { opacity: 0; pointer-events: none; } - - .openui-agent-sidebar-header__toggle-button { - opacity: 1; - pointer-events: auto; - } } } @@ -207,6 +207,25 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep; } } +// On hover (collapsed), swap the logo out for the toggle button. Gated on the +// settled `data-sidebar-visual-state="collapsed"` state so the swap only runs +// once the collapse animation has finished — keying it on the `--collapsed` +// class instead would let the button flash in mid-collapse, while the still-wide +// sidebar is momentarily under the cursor. (No-op when there is no logo: the +// button is already shown at rest via the :has() rule above — which is what +// fixes the reported TH-2392 no-logo case.) +.openui-agent-sidebar-container[data-sidebar-visual-state="collapsed"]:hover { + .openui-agent-sidebar-header__logo { + opacity: 0; + pointer-events: none; + } + + .openui-agent-sidebar-header__toggle-button { + opacity: 1; + pointer-events: auto; + } +} + .openui-agent-sidebar-container__overlay { position: absolute; left: 0; From 9bd2c4245600509d602715ba07dde12d7949a4f8 Mon Sep 17 00:00:00 2001 From: i-subham Date: Wed, 22 Jul 2026 16:24:44 +0530 Subject: [PATCH 3/4] style(react-ui): refine sidebar hover behavior for logo and toggle button - 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. --- .../react-ui/src/components/AgentInterface/sidebar.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/react-ui/src/components/AgentInterface/sidebar.scss b/packages/react-ui/src/components/AgentInterface/sidebar.scss index f9a2bdedb..db2f5c286 100644 --- a/packages/react-ui/src/components/AgentInterface/sidebar.scss +++ b/packages/react-ui/src/components/AgentInterface/sidebar.scss @@ -207,13 +207,6 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep; } } -// On hover (collapsed), swap the logo out for the toggle button. Gated on the -// settled `data-sidebar-visual-state="collapsed"` state so the swap only runs -// once the collapse animation has finished — keying it on the `--collapsed` -// class instead would let the button flash in mid-collapse, while the still-wide -// sidebar is momentarily under the cursor. (No-op when there is no logo: the -// button is already shown at rest via the :has() rule above — which is what -// fixes the reported TH-2392 no-logo case.) .openui-agent-sidebar-container[data-sidebar-visual-state="collapsed"]:hover { .openui-agent-sidebar-header__logo { opacity: 0; From 455fe2cfdb1951255a53fea8117b892c887bb334 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Thu, 23 Jul 2026 13:20:29 +0530 Subject: [PATCH 4/4] fix(react-ui): key collapsed-sidebar reveal to layout class; add keyboard and touch reveal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01XECS4NLhz6BNd1TUYbWjfu --- .../components/AgentInterface/sidebar.scss | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/components/AgentInterface/sidebar.scss b/packages/react-ui/src/components/AgentInterface/sidebar.scss index db2f5c286..39109ccf3 100644 --- a/packages/react-ui/src/components/AgentInterface/sidebar.scss +++ b/packages/react-ui/src/components/AgentInterface/sidebar.scss @@ -160,7 +160,7 @@ $sidebar-shadow: inset -10px 0 18px -18px cssUtils.$sunk-deep; // 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 (TH-2392). + // instead, keeping the open control discoverable. &:has(.openui-agent-sidebar-header__logo) .openui-agent-sidebar-header__toggle-button { opacity: 0; pointer-events: none; @@ -207,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; @@ -219,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;