From 696cfe7d65051d6e5be065d74da8ea53f2d9622c Mon Sep 17 00:00:00 2001
From: peter <peter@cygnus.systems>
Date: Wed, 2 Sep 2026 15:01:26 +0100
Subject: [PATCH] Style tables in markdown/html_fragment content

Markdown pipe-tables and hand-written html_fragment <table> markup already
rendered - the only existing rule was 'max-width: 100%', so they came out
as bare, unbordered browser-default tables. Adds borders, header
background, cell padding, and zebra striping, plus a display:block +
overflow-x:auto pattern so wide tables scroll horizontally instead of
squeezing columns or breaking page layout.

Lives in base.css, which report.css and tasks.css both @import, so it
applies to every existing and future markdown/html_fragment artifact
immediately - no agent-side change needed, since this is rendered live
from CSS rather than baked into stored HTML.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 static/themes/base.css | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/static/themes/base.css b/static/themes/base.css
index c9d5916..ae585f1 100644
--- a/static/themes/base.css
+++ b/static/themes/base.css
@@ -8,11 +8,38 @@ body.artifact {
   padding: 3rem 1.25rem;
 }
 
-img,
-table {
+img {
   max-width: 100%;
 }
 
 pre {
   overflow-x: auto;
 }
+
+/* Applies to any <table> in markdown (pipe-table syntax) or hand-written
+   html_fragment content. display:block + overflow-x lets wide tables scroll
+   horizontally instead of squeezing columns or breaking page layout, while
+   descendant tr/td/th keep their normal table layout internally. */
+table {
+  border-collapse: collapse;
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  width: max-content;
+}
+
+th,
+td {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  padding: 0.45rem 0.75rem;
+  text-align: left;
+}
+
+thead th {
+  background: rgba(0, 0, 0, 0.05);
+  font-weight: 600;
+}
+
+tbody tr:nth-child(even) {
+  background: rgba(0, 0, 0, 0.025);
+}