From 36375600a4b17b6506f0367ee4b902ecb25c3077 Mon Sep 17 00:00:00 2001
From: Benjamin Knofe-Vider <benjamin.k@posthog.com>
Date: Fri, 3 Jul 2026 09:39:28 +0200
Subject: [PATCH] admin/ui: never let table cells wrap and grow rows

whitespace-nowrap on the base TableCell/TableHead primitives so long
content (UUIDs, hostnames, timestamps) can never line-break and inflate
row height in any table. The Table wrapper is overflow-auto, so wide
content horizontal-scrolls instead. Per-cell className can still opt a
column back into wrapping.
---
 controlplane/admin/ui/src/components/ui/table.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/controlplane/admin/ui/src/components/ui/table.tsx b/controlplane/admin/ui/src/components/ui/table.tsx
index 18faceda..7aac618c 100644
--- a/controlplane/admin/ui/src/components/ui/table.tsx
+++ b/controlplane/admin/ui/src/components/ui/table.tsx
@@ -40,7 +40,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
     <th
       ref={ref}
       className={cn(
-        "h-9 px-3 text-left align-middle text-xs font-medium uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        "h-9 whitespace-nowrap px-3 text-left align-middle text-xs font-medium uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
         className,
       )}
       {...props}
@@ -51,7 +51,11 @@ TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
   ({ className, ...props }, ref) => (
-    <td ref={ref} className={cn("px-3 py-2 align-middle", className)} {...props} />
+    // whitespace-nowrap: cell content (UUIDs, hostnames, timestamps) must never
+    // wrap and grow the row — the Table wrapper is overflow-auto, so wide
+    // content horizontal-scrolls instead. Override per-cell via className when
+    // a column genuinely needs to wrap.
+    <td ref={ref} className={cn("whitespace-nowrap px-3 py-2 align-middle", className)} {...props} />
   ),
 );
 TableCell.displayName = "TableCell";