mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-02-13 08:14:58 -05:00
fix(frontend): improve CoPilot chat table styling (#12094)
## Summary - Remove left and right borders from tables rendered in CoPilot chat - Increase cell padding (py-3 → py-3.5) for better spacing between text and lines - Applies to both Streamdown (main chat) and MarkdownRenderer (tool outputs) Design feedback from Olivia to make tables "breathe" more. ## Test plan - [ ] Open CoPilot chat and trigger a response containing a table - [ ] Verify tables no longer have left/right borders - [ ] Verify increased spacing between rows - [ ] Check both light and dark modes 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- greptile_comment --> <h2>Greptile Overview</h2> <details><summary><h3>Greptile Summary</h3></summary> Improved CoPilot chat table styling by removing left and right borders and increasing vertical padding from `py-3` to `py-3.5`. Changes apply to both: - Streamdown-rendered tables (via CSS selector in `globals.css`) - MarkdownRenderer tables (via Tailwind classes) The changes make tables "breathe" more per design feedback from Olivia. **Issue Found:** - The CSS padding value in `globals.css:192` is `0.625rem` (`py-2.5`) but should be `0.875rem` (`py-3.5`) to match the PR description and the MarkdownRenderer implementation. </details> <details><summary><h3>Confidence Score: 2/5</h3></summary> - This PR has a logical error that will cause inconsistent table styling between Streamdown and MarkdownRenderer tables - The implementation has an inconsistency where the CSS file uses `py-2.5` padding while the PR description and MarkdownRenderer use `py-3.5`. This will result in different table padding between the two rendering systems, contradicting the goal of consistent styling improvements. - Pay close attention to `autogpt_platform/frontend/src/app/globals.css` - the padding value needs to be corrected to match the intended design </details> <!-- greptile_other_comments_section --> <!-- /greptile_comment --> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
This commit is contained in:
@@ -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.875rem 1rem; /* py-3.5 px-4 */
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user