From a8244c36cf62a5c3070909bedb9228b695b157e2 Mon Sep 17 00:00:00 2001
From: fixfon <12512757+fixfon@users.noreply.github.com>
Date: Fri, 23 Oct 2026 13:48:27 +0300
Subject: [PATCH 1/3] fix(web): wide tables keep their horizontal scrollbar
 visible when clipped

The right-edge fade of a clipped chat table can land on the 1.5rem gutter
between two columns, where there is nothing to fade. The table then looks
complete, and the horizontal scrollbar only shows on hover or scroll.

Keep the horizontal scrollbar visible at rest inside chat tables. It only
mounts while the table overflows, so tables that fit are unchanged, and
other ScrollArea users are not affected.

Fixes #16091
---
 apps/web/src/index.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 01fa601ab666e..2c14f7a51b845 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -2184,6 +2184,15 @@ code {
   overflow: visible;
 }
 
+/* The edge fade can land on the gutter between columns and paint nothing, so a
+   clipped table looks complete. The horizontal scrollbar only mounts while the
+   table overflows; keep it visible at rest as the cue. */
+.chat-markdown
+  .chat-markdown-table-container
+  [data-slot="scroll-area-scrollbar"][data-orientation="horizontal"] {
+  opacity: 1;
+}
+
 :root {
   --diff-addition: var(--success);
   --diff-deletion: var(--destructive);

From a38f12408930747e3ef06e3368610205bbbbc13f Mon Sep 17 00:00:00 2001
From: fixfon <12512757+fixfon@users.noreply.github.com>
Date: Fri, 23 Oct 2026 14:07:36 +0300
Subject: [PATCH 2/3] fix(web): give the chat table scrollbar thumb a visible
 color in dark mode

The default dark thumb is 8% white on a near-black page, so the scrollbar
that now stays visible on a clipped chat table was too faint to work as a
cue. Color the table's horizontal thumb from --muted-foreground, which
reads in both themes. Other scroll areas keep their thumb.
---
 apps/web/src/index.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 2c14f7a51b845..c2c42d67d3b87 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -2186,11 +2186,14 @@ code {
 
 /* The edge fade can land on the gutter between columns and paint nothing, so a
    clipped table looks complete. The horizontal scrollbar only mounts while the
-   table overflows; keep it visible at rest as the cue. */
+   table overflows; keep it visible at rest as the cue, with a thumb that stays
+   readable against a dark page. */
 .chat-markdown
   .chat-markdown-table-container
   [data-slot="scroll-area-scrollbar"][data-orientation="horizontal"] {
   opacity: 1;
+  --app-scrollbar-thumb: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
+  --app-scrollbar-thumb-hover: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
 }
 
 :root {

From eb6a6c5b11069598c6fdfb3b8a2f6dc044a115d0 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 26 Oct 2026 20:51:02 +0000
Subject: [PATCH 3/3] refactor(web): shorten the table overflow comment

---
 apps/web/src/index.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 4b4e78c1ecda5..40e1cff0197d3 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -2305,10 +2305,7 @@ code {
   overflow: visible;
 }
 
-/* The edge fade can land on the gutter between columns and paint nothing, so a
-   clipped table looks complete. The horizontal scrollbar only mounts while the
-   table overflows; keep it visible at rest as the cue, with a thumb that stays
-   readable against a dark page. */
+/* Keep overflow discoverable when the edge fade falls between columns. */
 .chat-markdown
   .chat-markdown-table-container
   [data-slot="scroll-area-scrollbar"][data-orientation="horizontal"] {