From 7f9ca47c1ef2891a8d17a34c49ffc9fb40c6b2c4 Mon Sep 17 00:00:00 2001
From: imagineer99 <samleejackson0@gmail.com>
Date: Fri, 13 Feb 2026 19:02:31 +0000
Subject: [PATCH] style: polish chat page spacing, small typography, and panel
 alignment

---
 studio/frontend/src/features/chat/chat-page.tsx      |  4 +++-
 .../src/features/chat/chat-settings-sheet.tsx        | 11 ++++++-----
 studio/frontend/src/features/chat/thread-sidebar.tsx | 12 ++++++------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/studio/frontend/src/features/chat/chat-page.tsx b/studio/frontend/src/features/chat/chat-page.tsx
index 543ae9e865..445aa53f53 100644
--- a/studio/frontend/src/features/chat/chat-page.tsx
+++ b/studio/frontend/src/features/chat/chat-page.tsx
@@ -258,9 +258,10 @@ export function ChatPage(): ReactElement {
   }, [refresh]);
 
   return (
+    <div className="h-[calc(100vh-4rem)] bg-background overflow-hidden">
     <SidebarProvider
       defaultOpen={true}
-      className="!min-h-0 h-[calc(100vh-4rem)] max-w-7xl mx-auto px-4"
+      className="!min-h-0 h-full max-w-7xl mx-auto px-4"
       style={
         {
           "--sidebar-width": "14rem",
@@ -327,5 +328,6 @@ export function ChatPage(): ReactElement {
         onParamsChange={setInferenceParams}
       />
     </SidebarProvider>
+    </div>
   );
 }
diff --git a/studio/frontend/src/features/chat/chat-settings-sheet.tsx b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
index 86ace6fdb5..484b0d2b5e 100644
--- a/studio/frontend/src/features/chat/chat-settings-sheet.tsx
+++ b/studio/frontend/src/features/chat/chat-settings-sheet.tsx
@@ -193,18 +193,19 @@ export function ChatSettingsPanel({
       className={`shrink-0 h-full overflow-hidden bg-sidebar rounded-2xl corner-squircle transition-[width] duration-200 ease-linear ${open ? "w-[17rem] border-sidebar-border" : "w-0"}`}
     >
       <div className="flex h-full w-[17rem] flex-col">
-        <div className="flex items-center gap-2 px-3 py-2">
+        <div className="flex items-center gap-2 px-4 py-3">
           <HugeiconsIcon
             icon={PencilEdit01Icon}
-            className="size-3.5 text-muted-foreground"
+            className="size-4 text-muted-foreground/70"
           />
-          <span className="flex-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            Advanced Configuration
+          <span className="flex-1 text-base font-semibold tracking-tight">
+            Configuration
           </span>
         </div>
 
         <div className="flex-1 overflow-y-auto px-1.5">
-          <div className="px-2 pb-3">
+          {/* mt-4 matches the Playground sidebar gap (SidebarHeader py-3 + SidebarGroup pt-1) */}
+          <div className="mt-4 px-2 pb-3">
             <div className="flex items-center gap-2">
               <Select value={activePreset} onValueChange={applyPreset}>
                 <SelectTrigger className="h-8 flex-1 corner-squircle text-xs">
diff --git a/studio/frontend/src/features/chat/thread-sidebar.tsx b/studio/frontend/src/features/chat/thread-sidebar.tsx
index b8ded1142d..e1645e77bb 100644
--- a/studio/frontend/src/features/chat/thread-sidebar.tsx
+++ b/studio/frontend/src/features/chat/thread-sidebar.tsx
@@ -99,11 +99,11 @@ export function ThreadSidebar({
 
   return (
     <>
-      <SidebarHeader>
-        <span className="text-sm font-semibold">Playground</span>
+      <SidebarHeader className="px-4 py-3">
+        <span className="text-base font-semibold tracking-tight">Playground</span>
       </SidebarHeader>
       <SidebarContent>
-        <SidebarGroup>
+        <SidebarGroup className="px-4 pt-1">
           <SidebarGroupContent>
             <SidebarMenu>
               <SidebarMenuItem>
@@ -121,8 +121,8 @@ export function ThreadSidebar({
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
-        <SidebarGroup className="flex-1">
-          <SidebarGroupLabel>Your Chats</SidebarGroupLabel>
+        <SidebarGroup className="flex-1 px-4">
+          <SidebarGroupLabel className="text-xs font-medium text-muted-foreground/80">Your Chats</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               {items.map((item) => (
@@ -144,7 +144,7 @@ export function ThreadSidebar({
               ))}
             </SidebarMenu>
             {items.length === 0 && (
-              <p className="px-2 py-4 text-center text-xs text-muted-foreground">
+              <p className="px-2 py-6 text-center text-xs text-muted-foreground">
                 No threads yet
               </p>
             )}