From aeaf6300ecfed417bf0ea2bb80426275d33d295c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 23 Jul 2026 16:16:15 +0100
Subject: [PATCH] fix(webapp): double the padding + gap around and between the
 charts (TRI-12068)

Bump the MetricsLayout chart-area spacing from 1.5 to 3 (grid gap + gutter, the scroll column's vertical gap/padding, and the content separation), so the list charts match the detail charts' spacing and both pages breathe more (item 2).
---
 apps/webapp/app/components/layout/MetricsLayout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/layout/MetricsLayout.tsx b/apps/webapp/app/components/layout/MetricsLayout.tsx
index 4e1ac3014..df8d725ec 100644
--- a/apps/webapp/app/components/layout/MetricsLayout.tsx
+++ b/apps/webapp/app/components/layout/MetricsLayout.tsx
@@ -178,7 +178,7 @@ function MetricsLayoutMain({ children, scroll }: { children: ReactNode; scroll:
       <div
         className={
           scroll === "page"
-            ? "flex min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto py-1.5 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
+            ? "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
             : "flex min-h-0 flex-1 flex-col overflow-hidden"
         }
       >
@@ -318,7 +318,7 @@ function MetricsLayoutGrid({
   return (
     <div
       className={cn(
-        "grid gap-1.5 px-1.5",
+        "grid gap-3 px-3",
         // `shrink-0` is load-bearing: the grid sits in Root's flex-col scroll container, where the
         // default flex-shrink would collapse a fixed-height row whose chart cards have ~no
         // intrinsic height. Pin it so the charts keep their row height and the page scrolls past.
@@ -348,7 +348,7 @@ function MetricsLayoutContent({
   /** Pad the content into a column (page gutter) instead of letting it span edge to edge. */
   inset?: boolean;
 }) {
-  return <div className={cn("mt-1.5 flex flex-col gap-1.5", inset && "px-1.5")}>{children}</div>;
+  return <div className={cn("mt-3 flex flex-col gap-3", inset && "px-3")}>{children}</div>;
 }
 
 export const MetricsLayout = {