From 7ed8fddfefa798ab4f8d757ac0d42d4670061b4d Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <maximilian@kaske.org>
Date: Sun, 25 Oct 2026 19:33:41 +0100
Subject: [PATCH] fix(dashboard): borderless activity, sticky weekdays, stable
 latency columns

---
 .../components/content/activity-calendar.tsx  | 20 ++++++++++++++-----
 .../src/components/content/activity-lanes.tsx |  2 +-
 .../data-table/monitors/columns.tsx           |  4 ++++
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/components/content/activity-calendar.tsx b/apps/dashboard/src/components/content/activity-calendar.tsx
index 236b6aff3..e8745c4bc 100644
--- a/apps/dashboard/src/components/content/activity-calendar.tsx
+++ b/apps/dashboard/src/components/content/activity-calendar.tsx
@@ -41,7 +41,7 @@ export function ActivityCalendar({
     <div
       data-slot="activity-calendar"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-3 rounded-lg border p-3 [--activity-cell:10px] [--activity-gap:3px]",
+        "flex flex-col gap-3 [--activity-cell:10px] [--activity-gap:3px]",
         className,
       )}
       {...props}
@@ -89,6 +89,8 @@ const WEEKDAYS = ["Mon", "", "Wed", "", "Fri", "", ""];
 const DAYS_PER_WEEK = 7;
 // a month label needs this many columns so it never runs into the next one
 const MIN_MONTH_COLUMNS = 3;
+const STICKY =
+  "bg-background sticky left-0 z-10 shadow-[0_0_0_var(--activity-gap)_var(--background)]";
 
 /**
  * Weeks as columns, Monday on top. `days` is consecutive; the first week is
@@ -117,7 +119,11 @@ export function ActivityCalendarGrid({
     <div ref={scroller} className="relative overflow-x-auto">
       <div
         data-slot="activity-calendar-grid"
-        className={cn("grid grid-flow-col gap-(--activity-gap)", className)}
+        // as wide as its weeks, or the sticky weekdays scroll away with the box
+        className={cn(
+          "grid w-max min-w-full grid-flow-col gap-(--activity-gap)",
+          className,
+        )}
         style={{
           gridTemplateRows: `auto repeat(${DAYS_PER_WEEK}, auto)`,
           gridTemplateColumns: `auto repeat(${weeks.length}, minmax(var(--activity-cell), 1fr))`,
@@ -125,18 +131,22 @@ export function ActivityCalendarGrid({
         }}
         {...props}
       >
-        <div />
+        {/* the spread shadow covers cells peeking through the gaps */}
+        <div className={STICKY} />
         {WEEKDAYS.map((label, i) => (
           <div
             key={i}
-            className="text-muted-foreground flex items-center pr-1 font-mono text-xs leading-none"
+            className={cn(
+              STICKY,
+              "text-muted-foreground flex items-center pr-1 font-mono text-xs leading-none",
+            )}
           >
             {label}
           </div>
         ))}
         {weeks.map((week, w) => (
           <Fragment key={w}>
-            <div className="text-muted-foreground h-3.5 font-mono text-xs leading-none whitespace-nowrap">
+            <div className="text-muted-foreground h-3.5 w-0 font-mono text-xs leading-none whitespace-nowrap">
               {hydrated ? months[w] : null}
             </div>
             {week.map((day, d) =>
diff --git a/apps/dashboard/src/components/content/activity-lanes.tsx b/apps/dashboard/src/components/content/activity-lanes.tsx
index 176c2700a..a73d5b54e 100644
--- a/apps/dashboard/src/components/content/activity-lanes.tsx
+++ b/apps/dashboard/src/components/content/activity-lanes.tsx
@@ -25,7 +25,7 @@ export function ActivityLanes({
     <div
       data-slot="activity-lanes"
       className={cn(
-        "bg-card text-card-foreground @container grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2 rounded-lg border p-3",
+        "@container grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2",
         className,
       )}
       {...props}
diff --git a/apps/dashboard/src/components/data-table/monitors/columns.tsx b/apps/dashboard/src/components/data-table/monitors/columns.tsx
index 86f28f743..4e84840df 100644
--- a/apps/dashboard/src/components/data-table/monitors/columns.tsx
+++ b/apps/dashboard/src/components/data-table/monitors/columns.tsx
@@ -240,6 +240,8 @@ export const columns: ColumnDef<Monitor>[] = [
       if (!value) return <TableCellEmpty>—</TableCellEmpty>;
       return <TableCellNumber value={value} unit="ms" />;
     },
+    // fixed width: the skeleton is narrower than the values, so an auto width jumps on load
+    meta: { headerClassName: "w-24" },
     enableHiding: false,
   },
   {
@@ -257,6 +259,7 @@ export const columns: ColumnDef<Monitor>[] = [
       if (!value) return <TableCellEmpty>—</TableCellEmpty>;
       return <TableCellNumber value={value} unit="ms" />;
     },
+    meta: { headerClassName: "w-24" },
     enableHiding: false,
     enableGlobalFilter: false,
   },
@@ -275,6 +278,7 @@ export const columns: ColumnDef<Monitor>[] = [
       if (!value) return <TableCellEmpty>—</TableCellEmpty>;
       return <TableCellNumber value={value} unit="ms" />;
     },
+    meta: { headerClassName: "w-24" },
     enableHiding: false,
     enableGlobalFilter: false,
   },
-- 
2.54.0