From fee155c65b825ee59ecb755a72bd4edc976758bc Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 12 Feb 2026 17:27:15 -0800
Subject: [PATCH] fix WeeklyTraffic header clipping in board panels

Separate day name headers into their own grid row instead of embedding
them inside the hourly data grid with marginBottom, which pushed the
text outside the fixed 16px row height.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/metrics/WeeklyTraffic.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/metrics/WeeklyTraffic.tsx b/src/components/metrics/WeeklyTraffic.tsx
index 7a3b51dfb..8c49b915a 100644
--- a/src/components/metrics/WeeklyTraffic.tsx
+++ b/src/components/metrics/WeeklyTraffic.tsx
@@ -39,8 +39,15 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
       <Grid columns="repeat(8, 1fr)" gap>
         {data && (
           <>
-            <Grid rows="repeat(25, 16px)" gap="1">
-              <Row>&nbsp;</Row>
+            <Row>&nbsp;</Row>
+            {daysOfWeek.map((index: number) => (
+              <Row key={index} alignItems="center" justifyContent="center">
+                <Text weight="bold" align="center">
+                  {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+                </Text>
+              </Row>
+            ))}
+            <Grid rows="repeat(24, 16px)" gap="1">
               {Array(24)
                 .fill(null)
                 .map((_, i) => {
@@ -66,11 +73,6 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
                   key={index}
                   gap="1"
                 >
-                  <Row alignItems="center" justifyContent="center" marginBottom="3">
-                    <Text weight="bold" align="center">
-                      {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
-                    </Text>
-                  </Row>
                   {day?.map((count: number, j) => {
                     const pct = max ? count / max : 0;
                     return (