diff --git a/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx b/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx
index 20378643..6ab7bd90 100644
--- a/ui/src/pages/DashboardTab/PunchcardHeatmap.tsx
+++ b/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
diff --git a/ui/src/pages/DashboardTab/Treemap.tsx b/ui/src/pages/DashboardTab/Treemap.tsx
index 01e88a0a..f4a3e5f1 100644
--- a/ui/src/pages/DashboardTab/Treemap.tsx
+++ b/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;