fix: make activity calendar full-width, combine day/hour charts

Move the Heatmap (activity calendar) to a full-width card so the
1-year calendar fits without clipping. Combine ActivityTimeline and
HourOfWeekHeatmap into a single "Activity by Day and Hour" card.
Fix pre-existing TS7023 error in createVirtualizer.test.ts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: wesm

frontend/src/lib/components/analytics/ActivityTimeline.svelte

@@ -164,7 +164,6 @@
 
 <div class="timeline-container">
   <div class="timeline-header">
-    <h3 class="chart-title">Activity</h3>
     <div class="controls">
       <div class="metric-toggle">
         <button
@@ -302,12 +301,6 @@
     margin-bottom: 8px;
   }
 
-  .chart-title {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
   .controls {
     display: flex;
     gap: 8px;

frontend/src/lib/components/analytics/AnalyticsPage.svelte

@@ -15,6 +15,13 @@
   import { analytics } from "../../stores/analytics.svelte.js";
   import { exportAnalyticsCSV } from "../../utils/csv-export.js";
 
+  function shortTz(tz: string): string {
+    const slash = tz.lastIndexOf("/");
+    return slash >= 0
+      ? tz.slice(slash + 1).replace(/_/g, " ")
+      : tz;
+  }
+
   const REFRESH_INTERVAL_MS = 5 * 60 * 1000;
 
   function handleExportCSV() {
@@ -70,16 +77,22 @@
     <SummaryCards />
 
     <div class="chart-grid">
-      <div class="chart-panel">
+      <div class="chart-panel wide">
         <Heatmap />
       </div>
 
       <div class="chart-panel">
-        <HourOfWeekHeatmap />
-      </div>
-
-      <div class="chart-panel">
+        <div class="chart-header">
+          <h3 class="chart-title">
+            Activity by Day and Hour
+            <span class="tz-label">
+              {shortTz(analytics.timezone)}
+            </span>
+          </h3>
+        </div>
         <ActivityTimeline />
+        <div class="chart-divider"></div>
+        <HourOfWeekHeatmap />
       </div>
 
       <div class="chart-panel">
@@ -191,6 +204,32 @@
     grid-column: 1 / -1;
   }
 
+  .chart-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .chart-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .tz-label {
+    font-weight: 400;
+    color: var(--text-muted);
+    font-size: 10px;
+    margin-left: 4px;
+  }
+
+  .chart-divider {
+    height: 1px;
+    background: var(--border-muted);
+    margin: 12px 0;
+  }
+
   @media (max-width: 800px) {
     .chart-grid {
       grid-template-columns: 1fr;

frontend/src/lib/components/analytics/HourOfWeekHeatmap.svelte

@@ -137,22 +137,9 @@
     return hour !== sh;
   }
 
-  function shortTz(tz: string): string {
-    const slash = tz.lastIndexOf("/");
-    return slash >= 0
-      ? tz.slice(slash + 1).replace(/_/g, " ")
-      : tz;
-  }
 </script>
 
 <div class="how-container">
-  <div class="chart-header">
-    <h3 class="chart-title">
-      Activity by Day and Hour
-      <span class="tz-label">{shortTz(analytics.timezone)}</span>
-    </h3>
-  </div>
-
   {#if analytics.loading.hourOfWeek}
     <div class="loading">Loading...</div>
   {:else if analytics.errors.hourOfWeek}
@@ -261,26 +248,6 @@
     flex: 1;
   }
 
-  .chart-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-  }
-
-  .chart-title {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text-primary);
-  }
-
-  .tz-label {
-    font-weight: 400;
-    color: var(--text-muted);
-    font-size: 10px;
-    margin-left: 4px;
-  }
-
   .how-scroll {
     overflow-x: auto;
     padding-bottom: 4px;

frontend/src/lib/virtual/createVirtualizer.test.ts

@@ -247,14 +247,14 @@ describe('createVirtualizer reactivity', () => {
       options: {
         count: 10,
         getScrollElement: () => document.createElement('div'),
-        estimateSize: () => 50,
+        estimateSize: (): number => 50,
       },
     },
     {
       type: 'window' as const,
       options: {
         count: 20,
-        estimateSize: () => 50,
+        estimateSize: (): number => 50,
       },
     },
   ])(