From 16dd677be42b8b29c2f6a19f6b434224a8c774aa Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 25 Aug 2026 08:29:42 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20Set=20Question=20Popove?=
 =?UTF-8?q?r=20and=20Subagent=20Panel=20on=20the=20Sidebar=20Surface=20(#1?=
 =?UTF-8?q?5201)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both floated over the chat on surfaces one step too close to it — the
question popover on surface-secondary, the subagent thread panel on the
chat's own surface-primary. Both now use surface-primary-alt, the
conversation-list sidebar's role, verified in the running app: popover,
panel, and sidebar all resolve to the same computed background in dark
(rgb 23,23,23) and light (rgb 247,247,248). Inline question cards keep
surface-secondary deliberately — that is the tool-record family's
surface, and settled questions collapse into that family.
---
 client/src/components/Chat/Input/AskUserQuestionPopover.tsx  | 4 ++--
 client/src/components/Chat/Subagents/SubagentThreadPanel.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Chat/Input/AskUserQuestionPopover.tsx b/client/src/components/Chat/Input/AskUserQuestionPopover.tsx
index d6568da1af..66c73e2654 100644
--- a/client/src/components/Chat/Input/AskUserQuestionPopover.tsx
+++ b/client/src/components/Chat/Input/AskUserQuestionPopover.tsx
@@ -51,7 +51,7 @@ function AskUserQuestionsPopoverPanel({ ask }: { ask: ReturnType<typeof useAskAn
 
   return (
     <div className="absolute bottom-28 z-10 w-full">
-      <div className="popover border-token-border-light flex max-h-[70vh] flex-col rounded-2xl border bg-surface-secondary shadow-lg">
+      <div className="popover border-token-border-light flex max-h-[70vh] flex-col rounded-2xl border bg-surface-primary-alt shadow-lg">
         <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border-light px-3 py-2">
           <p className="text-sm font-medium text-text-primary">
             {localize(
@@ -156,7 +156,7 @@ function AskUserQuestionPopoverPanel({
           scroll region: the panel is absolutely positioned, so anything that
           overflows it is unreachable by page scroll. */}
       <div
-        className="popover border-token-border-light flex max-h-[60vh] flex-col rounded-2xl border bg-surface-secondary p-2 shadow-lg"
+        className="popover border-token-border-light flex max-h-[60vh] flex-col rounded-2xl border bg-surface-primary-alt p-2 shadow-lg"
         onKeyDown={handlePopoverKeyDown}
       >
         <div className="flex shrink-0 items-start justify-between gap-2 p-2">
diff --git a/client/src/components/Chat/Subagents/SubagentThreadPanel.tsx b/client/src/components/Chat/Subagents/SubagentThreadPanel.tsx
index 59b1ec8755..599a7c2012 100644
--- a/client/src/components/Chat/Subagents/SubagentThreadPanel.tsx
+++ b/client/src/components/Chat/Subagents/SubagentThreadPanel.tsx
@@ -585,7 +585,7 @@ export default function SubagentThreadPanel({ selection }: { selection: ActiveSu
       role={isMobile ? 'dialog' : 'region'}
       aria-modal={isMobile || undefined}
       aria-label={localize('com_ui_subagent_thread_panel')}
-      className="flex h-full w-full flex-col overflow-hidden bg-surface-primary text-text-primary"
+      className="flex h-full w-full flex-col overflow-hidden bg-surface-primary-alt text-text-primary"
     >
       <header className="flex min-h-14 shrink-0 items-center gap-3 border-b border-border-light px-4 py-3">
         <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-tertiary">