From 432b6624409e19a7d02032f7c8c3956c90a59fbf Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Tue, 27 Jan 2026 13:50:06 -0800
Subject: [PATCH] fix(site): style overflowing tables

---
 site/src/components/typography/Table.astro    | 40 ++++++++++++++-----
 site/src/content/docs/how-to/write-guides.mdx |  9 ++++-
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/site/src/components/typography/Table.astro b/site/src/components/typography/Table.astro
index 7811f571..cfdcc3ca 100644
--- a/site/src/components/typography/Table.astro
+++ b/site/src/components/typography/Table.astro
@@ -1,17 +1,35 @@
 ---
+import type { HTMLTag, Polymorphic } from "astro/types";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
-import type { HTMLTag, Polymorphic } from 'astro/types';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-type Props<Tag extends HTMLTag = 'table'> = Polymorphic<{ as: Tag }> & {
-  maxWidth?: boolean;
-  class?: string;
+type Props<Tag extends HTMLTag = "table"> = Polymorphic<{ as: Tag }> & {
+    maxWidth?: boolean;
+    class?: string;
 };
 
-const { as: Tag = 'table', maxWidth = true, class: className, ...props } = Astro.props;
+const {
+    as: Tag = "table",
+    maxWidth = true,
+    class: className,
+    ...props
+} = Astro.props;
 ---
 
-<Tag class={twMerge(clsx('w-full my-12 border-collapse', maxWidth && 'max-w-3xl mx-auto'), className)} {...props}>
-  <slot />
-</Tag>
+<div class={clsx("my-12", maxWidth && "mx-auto max-w-3xl")}>
+    <div class="overflow-x-auto flex -mx-6">
+        <div
+            class="sticky left-0 z-10 shrink-0 basis-6 bg-linear-to-r from-light-80 dark:from-dark-80 to-transparent pointer-events-none"
+            aria-hidden="true"
+        >
+        </div>
+        <Tag class={twMerge("w-full border-collapse", className)} {...props}>
+            <slot />
+        </Tag>
+        <div
+            class="sticky right-0 z-10 shrink-0 basis-6 bg-linear-to-l from-light-80 dark:from-dark-80 to-transparent pointer-events-none"
+            aria-hidden="true"
+        >
+        </div>
+    </div>
+</div>
diff --git a/site/src/content/docs/how-to/write-guides.mdx b/site/src/content/docs/how-to/write-guides.mdx
index 7d72f6f5..69264200 100644
--- a/site/src/content/docs/how-to/write-guides.mdx
+++ b/site/src/content/docs/how-to/write-guides.mdx
@@ -149,6 +149,13 @@ The blockquote element represents content that is quoted from another source, op
 | --------- | -------- | ------ |
 | _italics_ | **bold** | `code` |
 
+When a table is really wide, it overflows nicely on mobile
+
+| A | Table | With | A | Lot | Of | Columns |
+| --- | --- | --- | --- | --- | --- | --- |
+| contentcontentcontent | contentcontentcontent | contentcontentcontent | contentcontentcontent | contentcontentcontent | contentcontentcontent | contentcontentcontent |
+
+
 ### Code Blocks
 
 we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntax, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash
@@ -445,4 +452,4 @@ import ServerCode from '@/components/Code/ServerCode.astro';
   </TabsPanel>
   <MyDemo client:visible />
 </TabsRoot>
-```
\ No newline at end of file
+```