From f119ab4f60ca40dcea993c46dd8ce47440b10c96 Mon Sep 17 00:00:00 2001
From: YurenHao0426 <blackhao0426@gmail.com>
Date: Sat, 14 Feb 2026 04:29:18 +0000
Subject: Add horizontal scroll and thin borders for markdown tables

Matches the existing katex-display scroll pattern. Tables now have
1px borders and overflow-x: auto for wide content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/index.css | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

(limited to 'frontend/src/index.css')

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 864f8e5..8cecaf3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -206,6 +206,44 @@ html, body, #root {
   background: rgba(156, 163, 175, 0.8);
 }
 
+/* Allow wide markdown tables to scroll horizontally */
+.prose table {
+  display: block;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+  border-collapse: collapse;
+}
+
+.prose table::-webkit-scrollbar {
+  height: 4px;
+}
+
+.prose table::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.prose table::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.5);
+  border-radius: 2px;
+}
+
+.prose table::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.8);
+}
+
+/* Table borders */
+.prose th,
+.prose td {
+  border: 1px solid rgba(156, 163, 175, 0.3);
+  padding: 6px 10px;
+}
+
+.dark .prose th,
+.dark .prose td {
+  border-color: rgba(156, 163, 175, 0.2);
+}
+
 /* Global thin scrollbar — matches katex-display style */
 * {
   scrollbar-width: thin;
-- 
cgit v1.2.3