fix: make treemap and punchcard responsive with viewBox scaling

Replaced hardcoded width/height on SVG elements with viewBox + width:100%
so both components fill their parent container instead of using fixed pixels.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/DashboardTab/PunchcardHeatmap.tsx

@@ -75,7 +75,7 @@ export function PunchcardHeatmap({ cells, mode, width, height }: PunchcardHeatma
   }, [cells, mode, width, height]);
 
   return (
-    <svg width={width} height={height} style={{ display: 'block' }}>
+    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
       {/* Day labels (top) */}
       {DAYS.map((day, i) => (
         <text

ui/src/pages/DashboardTab/Treemap.tsx

@@ -101,14 +101,14 @@ export function Treemap({ items, width, height, onItemClick }: TreemapProps) {
 
   if (items.length === 0) {
     return (
-      <svg width={width} height={height}>
+      <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
         <text x={width / 2} y={height / 2} textAnchor="middle" fill="#9CA3AF" fontSize={12}>No data</text>
       </svg>
     );
   }
 
   return (
-    <svg width={width} height={height} style={{ display: 'block' }}>
+    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
       {rects.map(({ item, x, y, w, h }) => {
         const pad = 1;
         const rx = x + pad;