From dbbfe072b08e3b56579279c13a2d0423ef9506a6 Mon Sep 17 00:00:00 2001
From: Chris Tate <ctate@users.noreply.github.com>
Date: Sat, 25 Oct 2025 06:32:29 +0000
Subject: [PATCH 1/5] Remove mobile padding, borders and radius from panes

---
 components/task-chat.tsx    | 2 +-
 components/task-details.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/task-chat.tsx b/components/task-chat.tsx
index bd08490a..ae09b19d 100644
--- a/components/task-chat.tsx
+++ b/components/task-chat.tsx
@@ -1178,7 +1178,7 @@ export function TaskChat({ taskId, task }: TaskChatProps) {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full md:bg-card md:rounded-lg md:border md:p-3">
       {/* Header Tabs */}
       <div className="py-2 flex items-center justify-between gap-1 flex-shrink-0 h-[46px] overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
         <div className="flex items-center gap-1">
diff --git a/components/task-details.tsx b/components/task-details.tsx
index 137dd1cb..801a09ad 100644
--- a/components/task-details.tsx
+++ b/components/task-details.tsx
@@ -2044,7 +2044,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                   </div>
 
                   {/* Diff Viewer */}
-                  <div className="bg-card rounded-md border overflow-hidden h-[calc(100%-3rem)]">
+                  <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-3rem)]">
                     <div className="overflow-y-auto h-full">
                       <FileDiffViewer
                         selectedFile={selectedItemIsFolder ? undefined : selectedFile}
@@ -2069,12 +2069,12 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                   </div>
                 </div>
               ) : activeTab === 'chat' ? (
-                <div className="h-full pb-3">
+                <div className="h-full">
                   <TaskChat taskId={task.id} task={task} />
                 </div>
               ) : activeTab === 'preview' ? (
-                <div className="h-full pb-3">
-                  <div className="bg-card rounded-md border overflow-hidden h-full flex flex-col">
+                <div className="h-full">
+                  <div className="bg-card md:rounded-md md:border overflow-hidden h-full flex flex-col">
                     {/* Preview Toolbar */}
                     <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/50 flex-shrink-0 min-h-[40px]">
                       <Monitor className="h-4 w-4 text-muted-foreground flex-shrink-0" />

From dc6c4876345d0a84a7769016ab1c6d29e140006c Mon Sep 17 00:00:00 2001
From: Chris Tate <ctate@users.noreply.github.com>
Date: Sat, 25 Oct 2025 06:38:54 +0000
Subject: [PATCH 2/5] Remove extra padding around code and sandbox content

---
 components/task-details.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/task-details.tsx b/components/task-details.tsx
index 801a09ad..6d660a0f 100644
--- a/components/task-details.tsx
+++ b/components/task-details.tsx
@@ -2025,11 +2025,11 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
           {/* Mobile Layout */}
           <div className="md:hidden flex flex-col flex-1 min-h-0 relative pb-14">
             {/* Content Area */}
-            <div className="flex-1 overflow-hidden px-3 pt-3">
+            <div className="flex-1 overflow-hidden">
               {activeTab === 'code' ? (
                 <div className="relative h-full">
                   {/* Current File Path Bar */}
-                  <div className="mb-2 flex items-center gap-2">
+                  <div className="px-3 pt-3 pb-2 flex items-center gap-2 bg-background">
                     <Button
                       variant="ghost"
                       size="sm"
@@ -2044,7 +2044,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                   </div>
 
                   {/* Diff Viewer */}
-                  <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-3rem)]">
+                  <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-3.5rem)]">
                     <div className="overflow-y-auto h-full">
                       <FileDiffViewer
                         selectedFile={selectedItemIsFolder ? undefined : selectedFile}

From b01ac77017aa231649c37eebe26f83feebdd7612 Mon Sep 17 00:00:00 2001
From: Chris Tate <ctate@users.noreply.github.com>
Date: Sat, 25 Oct 2025 06:43:48 +0000
Subject: [PATCH 3/5] Add x padding and bottom padding remove link button from
 sandbox toolbar

---
 components/task-details.tsx | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/components/task-details.tsx b/components/task-details.tsx
index 6d660a0f..2e43fe3a 100644
--- a/components/task-details.tsx
+++ b/components/task-details.tsx
@@ -2069,7 +2069,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                   </div>
                 </div>
               ) : activeTab === 'chat' ? (
-                <div className="h-full">
+                <div className="h-full px-3 pb-3">
                   <TaskChat taskId={task.id} task={task} />
                 </div>
               ) : activeTab === 'preview' ? (
@@ -2105,18 +2105,6 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                       >
                         <RefreshCw className="h-3.5 w-3.5" />
                       </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        asChild
-                        className="h-6 w-6 p-0 flex-shrink-0"
-                        title="Open in New Tab"
-                        disabled={!task.sandboxUrl}
-                      >
-                        <a href={`/api/tasks/${task.id}/sandbox-proxy`} target="_blank" rel="noopener noreferrer">
-                          <ExternalLink className="h-3.5 w-3.5" />
-                        </a>
-                      </Button>
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                           <Button

From 111274a4af4eecb1abfbb9c2e43e596eee2820b7 Mon Sep 17 00:00:00 2001
From: Chris Tate <ctate@users.noreply.github.com>
Date: Sat, 25 Oct 2025 06:47:52 +0000
Subject: [PATCH 4/5] Fix spacing between code and tab bar; hide overflow in
 scrollable chat

---
 components/task-chat.tsx    | 2 +-
 components/task-details.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/task-chat.tsx b/components/task-chat.tsx
index ae09b19d..2c0da274 100644
--- a/components/task-chat.tsx
+++ b/components/task-chat.tsx
@@ -883,7 +883,7 @@ export function TaskChat({ taskId, task }: TaskChatProps) {
     })
 
     return (
-      <div ref={scrollContainerRef} className="flex-1 overflow-y-auto pb-4">
+      <div ref={scrollContainerRef} className="flex-1 overflow-y-auto overflow-x-hidden pb-4">
         {hiddenMessagesCount > 0 && (
           <div className="text-xs text-center text-muted-foreground opacity-50 mb-4 italic">
             {hiddenMessagesCount} older message{hiddenMessagesCount !== 1 ? 's' : ''} hidden
diff --git a/components/task-details.tsx b/components/task-details.tsx
index 2e43fe3a..064ecf5b 100644
--- a/components/task-details.tsx
+++ b/components/task-details.tsx
@@ -2029,7 +2029,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
               {activeTab === 'code' ? (
                 <div className="relative h-full">
                   {/* Current File Path Bar */}
-                  <div className="px-3 pt-3 pb-2 flex items-center gap-2 bg-background">
+                  <div className="px-3 pt-3 pb-2 flex items-center gap-2 bg-background border-b">
                     <Button
                       variant="ghost"
                       size="sm"
@@ -2044,7 +2044,7 @@ export function TaskDetails({ task, maxSandboxDuration = 300 }: TaskDetailsProps
                   </div>
 
                   {/* Diff Viewer */}
-                  <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-3.5rem)]">
+                  <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-41px)]">
                     <div className="overflow-y-auto h-full">
                       <FileDiffViewer
                         selectedFile={selectedItemIsFolder ? undefined : selectedFile}

From 36217bdd5cf53bef8f0bc590d34671a6510f3bb5 Mon Sep 17 00:00:00 2001
From: Chris Tate <ctate@users.noreply.github.com>
Date: Sat, 25 Oct 2025 06:54:32 +0000
Subject: [PATCH 5/5] Remove card wrapper from chat pane on desktop

---
 components/task-chat.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/task-chat.tsx b/components/task-chat.tsx
index 2c0da274..0e405a04 100644
--- a/components/task-chat.tsx
+++ b/components/task-chat.tsx
@@ -1178,7 +1178,7 @@ export function TaskChat({ taskId, task }: TaskChatProps) {
   }
 
   return (
-    <div className="flex flex-col h-full md:bg-card md:rounded-lg md:border md:p-3">
+    <div className="flex flex-col h-full">
       {/* Header Tabs */}
       <div className="py-2 flex items-center justify-between gap-1 flex-shrink-0 h-[46px] overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
         <div className="flex items-center gap-1">