From d6afe2af1ce7ec2080db090c01a39c8a9720a9ee Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Wed, 5 Aug 2026 16:28:12 +1000
Subject: [PATCH] bg

---
 .../interfaces/ExplorerPrototype/ExplorerPrototype.tsx    | 7 +++----
 .../interfaces/ExplorerPrototype/ExplorerTabBar.tsx       | 8 ++++----
 .../components/interfaces/ExplorerPrototype/QueryCell.tsx | 6 ++++--
 .../interfaces/ExplorerPrototype/TabToolbar.tsx           | 2 +-
 .../interfaces/ExplorerPrototype/views/ChatView.tsx       | 2 +-
 .../interfaces/ExplorerPrototype/views/HomeView.tsx       | 2 +-
 .../interfaces/ExplorerPrototype/views/NotebookView.tsx   | 2 +-
 7 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/apps/studio/components/interfaces/ExplorerPrototype/ExplorerPrototype.tsx b/apps/studio/components/interfaces/ExplorerPrototype/ExplorerPrototype.tsx
index c1ba24af1a0..a92755cd4ed 100644
--- a/apps/studio/components/interfaces/ExplorerPrototype/ExplorerPrototype.tsx
+++ b/apps/studio/components/interfaces/ExplorerPrototype/ExplorerPrototype.tsx
@@ -103,9 +103,8 @@ export const ExplorerPrototype = () => {
   }
 
   return (
-    // `bg-background` is the page surface the active tab blends into.
-    <div className="flex h-full flex-col bg-background">
-      <div className="flex h-10 items-center border-b bg-muted md:min-h-(--header-height)">
+    <div className="flex h-full flex-col">
+      <div className="flex h-10 items-center border-b bg-transparent md:min-h-(--header-height)">
         <ExplorerTabBar
           tabs={state.tabs}
           activeTabId={state.activeTabId}
@@ -120,7 +119,7 @@ export const ExplorerPrototype = () => {
         />
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="min-h-0 flex-1 overflow-y-auto bg-muted">
         {isHomeActive ? (
           <HomeView
             onCreateQuery={state.createQuery}
diff --git a/apps/studio/components/interfaces/ExplorerPrototype/ExplorerTabBar.tsx b/apps/studio/components/interfaces/ExplorerPrototype/ExplorerTabBar.tsx
index 477d316264c..a82253fb154 100644
--- a/apps/studio/components/interfaces/ExplorerPrototype/ExplorerTabBar.tsx
+++ b/apps/studio/components/interfaces/ExplorerPrototype/ExplorerTabBar.tsx
@@ -42,7 +42,7 @@ export const ExplorerTabBar = ({
       <div
         className={cn(
           'relative flex shrink-0 items-center border-r',
-          isHomeActive ? 'bg-background' : 'bg-transparent hover:bg-surface-200'
+          isHomeActive ? 'bg-muted' : 'bg-background hover:bg-surface-200'
         )}
       >
         <button
@@ -69,9 +69,9 @@ export const ExplorerTabBar = ({
             key={tab.id}
             className={cn(
               'group/tab relative flex items-center border-r',
-              // The active tab is the page surface pushed up into the muted row,
-              // so it reads as continuous with the content below it.
-              isActive ? 'bg-background' : 'bg-transparent hover:bg-surface-200'
+              // The active tab shares the muted content surface; inactive tabs
+              // remain on the background surface until selected.
+              isActive ? 'bg-muted' : 'bg-background hover:bg-surface-200'
             )}
           >
             <button
diff --git a/apps/studio/components/interfaces/ExplorerPrototype/QueryCell.tsx b/apps/studio/components/interfaces/ExplorerPrototype/QueryCell.tsx
index f882785c56a..95d1ae53046 100644
--- a/apps/studio/components/interfaces/ExplorerPrototype/QueryCell.tsx
+++ b/apps/studio/components/interfaces/ExplorerPrototype/QueryCell.tsx
@@ -142,8 +142,10 @@ export const QueryCell = ({
   return (
     <div
       className={cn(
-        'flex flex-col overflow-hidden bg-surface-100',
-        full ? 'h-full min-h-0 border-0 shadow-none' : 'rounded-md border shadow-xs'
+        'flex flex-col overflow-hidden',
+        full
+          ? 'h-full min-h-0 border-0 shadow-none'
+          : 'rounded-md border bg-muted shadow-xs'
       )}
     >
       <TabToolbar
diff --git a/apps/studio/components/interfaces/ExplorerPrototype/TabToolbar.tsx b/apps/studio/components/interfaces/ExplorerPrototype/TabToolbar.tsx
index 15e5c8b2e25..7b23b5d3f41 100644
--- a/apps/studio/components/interfaces/ExplorerPrototype/TabToolbar.tsx
+++ b/apps/studio/components/interfaces/ExplorerPrototype/TabToolbar.tsx
@@ -19,7 +19,7 @@ interface TabToolbarProps {
 }
 
 export const TabToolbar = ({ icon: Icon, title, actions }: TabToolbarProps) => (
-  <div className="flex h-10 shrink-0 items-center gap-2 border-b bg-background px-3 md:min-h-(--header-height)">
+  <div className="flex h-10 shrink-0 items-center gap-2 border-b bg-transparent px-3 md:min-h-(--header-height)">
     <Icon size={14} className="shrink-0 text-foreground-muted" />
     <div className="min-w-0 flex-1">
       {typeof title === 'string' ? <h2 className="truncate text-sm">{title}</h2> : title}
diff --git a/apps/studio/components/interfaces/ExplorerPrototype/views/ChatView.tsx b/apps/studio/components/interfaces/ExplorerPrototype/views/ChatView.tsx
index f2b384425a9..ea192194ed0 100644
--- a/apps/studio/components/interfaces/ExplorerPrototype/views/ChatView.tsx
+++ b/apps/studio/components/interfaces/ExplorerPrototype/views/ChatView.tsx
@@ -276,7 +276,7 @@ export const ChatView = ({
         <ConversationScrollButton aria-label="Jump to latest" />
       </Conversation>
 
-      <div className="bg-background p-4">
+      <div className="p-4">
         <ChatComposer onSubmit={onSendMessage} />
       </div>
     </div>
diff --git a/apps/studio/components/interfaces/ExplorerPrototype/views/HomeView.tsx b/apps/studio/components/interfaces/ExplorerPrototype/views/HomeView.tsx
index bd5027eb49b..9c6d210543d 100644
--- a/apps/studio/components/interfaces/ExplorerPrototype/views/HomeView.tsx
+++ b/apps/studio/components/interfaces/ExplorerPrototype/views/HomeView.tsx
@@ -22,7 +22,7 @@ export const HomeView = ({ onCreateQuery, onCreateNotebook, onCreateChat }: Home
   const [showTemplates, setShowTemplates] = useState(true)
 
   return (
-    <div className="h-full overflow-y-auto bg-background">
+    <div className="h-full overflow-y-auto">
       <div className="flex min-h-full items-center justify-center px-6 py-12">
         <div className="w-full max-w-2xl">
           <div className="mb-12 space-y-1 text-center">
diff --git a/apps/studio/components/interfaces/ExplorerPrototype/views/NotebookView.tsx b/apps/studio/components/interfaces/ExplorerPrototype/views/NotebookView.tsx
index a039d951584..f142004e015 100644
--- a/apps/studio/components/interfaces/ExplorerPrototype/views/NotebookView.tsx
+++ b/apps/studio/components/interfaces/ExplorerPrototype/views/NotebookView.tsx
@@ -99,7 +99,7 @@ export const NotebookView = ({
     <div
       className={cn(
         'flex flex-col',
-        embedded ? 'max-h-[32rem] overflow-hidden rounded-md border bg-surface-100' : 'h-full'
+        embedded ? 'max-h-[32rem] overflow-hidden rounded-md border bg-muted' : 'h-full'
       )}
     >
       <TabToolbar