From cb2f48451bf12b8e64f4ac89afc7912bfc971620 Mon Sep 17 00:00:00 2001
From: Lluis Agusti <hi@llu.lu>
Date: Thu, 12 Feb 2026 22:32:57 +0800
Subject: [PATCH] fix(frontend): improve CoPilot chat table styling

Remove left/right borders and increase cell padding for tables rendered
in CoPilot chat, per design feedback from Olivia.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 autogpt_platform/frontend/src/app/globals.css         | 11 +++++++++++
 .../OutputRenderers/renderers/MarkdownRenderer.tsx    |  6 +++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/globals.css b/autogpt_platform/frontend/src/app/globals.css
index dd1d17cde7..1a8cf584cf 100644
--- a/autogpt_platform/frontend/src/app/globals.css
+++ b/autogpt_platform/frontend/src/app/globals.css
@@ -180,3 +180,14 @@ body[data-google-picker-open="true"] [data-dialog-content] {
   z-index: 1 !important;
   pointer-events: none !important;
 }
+
+/* CoPilot chat table styling — remove left/right borders, increase padding */
+[data-streamdown="table-wrapper"] table {
+  border-left: none;
+  border-right: none;
+}
+
+[data-streamdown="table-wrapper"] th,
+[data-streamdown="table-wrapper"] td {
+  padding: 0.625rem 1rem; /* py-2.5 px-4 */
+}
diff --git a/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx b/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
index d94966c6c8..9815cea6ff 100644
--- a/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/OutputRenderers/renderers/MarkdownRenderer.tsx
@@ -226,7 +226,7 @@ function renderMarkdown(
           table: ({ children, ...props }) => (
             <div className="my-4 overflow-x-auto">
               <table
-                className="min-w-full divide-y divide-gray-200 rounded-lg border border-gray-200 dark:divide-gray-700 dark:border-gray-700"
+                className="min-w-full divide-y divide-gray-200 border-y border-gray-200 dark:divide-gray-700 dark:border-gray-700"
                 {...props}
               >
                 {children}
@@ -235,7 +235,7 @@ function renderMarkdown(
           ),
           th: ({ children, ...props }) => (
             <th
-              className="bg-gray-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+              className="bg-gray-50 px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300"
               {...props}
             >
               {children}
@@ -243,7 +243,7 @@ function renderMarkdown(
           ),
           td: ({ children, ...props }) => (
             <td
-              className="border-t border-gray-200 px-4 py-3 text-sm text-gray-600 dark:border-gray-700 dark:text-gray-400"
+              className="border-t border-gray-200 px-4 py-3.5 text-sm text-gray-600 dark:border-gray-700 dark:text-gray-400"
               {...props}
             >
               {children}