From 3e03d8f97b33e15ceb5de0d2045c5198bd9381ea Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Mon, 13 Jul 2026 15:58:40 +0800
Subject: [PATCH] fix(views): keep in-card side panels on the content surface
 color (#5329)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The settings nav and agent overview aside tinted themselves with
bg-app-shell/70, pulling the window-chrome tone inside the content
card. Since the desktop's active tab merges into the card top
(MUL-4439), a tinted panel under the first tabs visibly broke the
tab/content seam. Zone separation stays with the hairline divider,
row hover/selected states, and the narrow column — matching the
inbox panel's existing pattern.

Co-authored-by: Lambda <lambda@multica.ai>
Co-authored-by: multica-agent <github@multica.ai>
---
 packages/views/agents/components/agent-overview-pane.tsx | 4 +++-
 packages/views/settings/components/settings-page.tsx     | 7 +++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/views/agents/components/agent-overview-pane.tsx b/packages/views/agents/components/agent-overview-pane.tsx
index 1aaa23087..096c46a57 100644
--- a/packages/views/agents/components/agent-overview-pane.tsx
+++ b/packages/views/agents/components/agent-overview-pane.tsx
@@ -357,7 +357,9 @@ export function AgentOverviewPane({
 
         {secondaryTabs.length > 0 && activeSecondaryTab && (
           <div className="flex min-h-full flex-col md:h-full md:flex-row">
-            <aside className="shrink-0 overflow-x-auto border-b border-surface-border bg-app-shell/70 p-2 md:w-52 md:overflow-y-auto md:border-b-0 md:border-r md:p-4">
+            {/* Content-surface color, no shell tint — same rule as the settings
+                nav: in-card panels must not break the desktop tab merge (MUL-4439). */}
+            <aside className="shrink-0 overflow-x-auto border-b border-surface-border p-2 md:w-52 md:overflow-y-auto md:border-b-0 md:border-r md:p-4">
               <div
                 className="flex w-max min-w-full items-center gap-1 md:w-full md:flex-col md:items-stretch"
                 role="tablist"
diff --git a/packages/views/settings/components/settings-page.tsx b/packages/views/settings/components/settings-page.tsx
index 108104983..480e6f972 100644
--- a/packages/views/settings/components/settings-page.tsx
+++ b/packages/views/settings/components/settings-page.tsx
@@ -140,8 +140,11 @@ export function SettingsPage({ extraAccountTabs }: SettingsPageProps = {}) {
       orientation={isMobile ? "horizontal" : "vertical"}
       className="flex flex-1 min-h-0 flex-col gap-0 overflow-y-auto md:flex-row md:overflow-hidden"
     >
-      {/* Structural navigation; bounded setting groups remain in the content surface. */}
-      <div className="shrink-0 overflow-x-auto border-b border-surface-border bg-app-shell/70 p-2 md:w-56 md:overflow-y-auto md:border-b-0 md:border-r md:p-4">
+      {/* Structural navigation; bounded setting groups remain in the content surface.
+          Stays on the content surface color (no shell tint): the desktop's active
+          tab merges into the card top, and a tinted panel under the first tabs
+          breaks that seam (MUL-4439). Zoning comes from the divider instead. */}
+      <div className="shrink-0 overflow-x-auto border-b border-surface-border p-2 md:w-56 md:overflow-y-auto md:border-b-0 md:border-r md:p-4">
         <h1 className="sr-only text-sm font-semibold md:not-sr-only md:mb-4 md:px-2">{t(($) => $.page.title)}</h1>
         <TabsList
           variant="line"