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

@@ -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 (