improve chart text legibility on mobile

Author: atharvas

src/components/charts/HeatmapGrid.svelte

@@ -177,6 +177,8 @@
 <div class="hg-wrap" bind:this={containerEl}>
 	<svg
 		class="hg-svg"
+		width={W}
+		height={H}
 		viewBox="0 0 {W} {H}"
 		preserveAspectRatio="xMidYMid meet"
 		role="img"
@@ -398,9 +400,14 @@
 		font-family: var(--sans);
 	}
 
-	@media (max-width: 520px) {
+	/* On narrow viewports we stop shrinking the SVG and let it scroll
+	   horizontally inside .hg-wrap. This keeps the in-chart text at its
+	   native ~12px instead of dropping to 7–9px after viewBox scaling,
+	   without risking row-label overlap from a font bump. */
+	@media (max-width: 820px) {
 		.hg-svg {
-			min-width: 480px;
+			width: auto;
+			min-width: 100%;
 		}
 	}
 

src/components/charts/LegendScatter.svelte

@@ -202,7 +202,7 @@
 				{/if}
 			</text>
 			<text
-				class="axis-title"
+				class="axis-title axis-title-y"
 				transform="translate({-54},{ih / 2}) rotate(-90)"
 				text-anchor="middle"
 			>
@@ -371,6 +371,27 @@
 		opacity: 0.9;
 	}
 
+	/* viewBox is 760×420; on a ~440px-wide mobile card the SVG shrinks
+	   ~0.58×, so the desktop sizes above render below the 80%-of-caption
+	   legibility floor (~11.5px). Bump them in SVG units to compensate.
+	   The rotated y-axis title would collide with the bigger y-tick labels
+	   in the cramped left margin, so we hide it on mobile — the chart
+	   description above already names the y dimension. */
+	@media (max-width: 820px) {
+		.tick {
+			font-size: 18px;
+		}
+		.axis-title {
+			font-size: 20px;
+		}
+		.axis-better {
+			font-size: 22px;
+		}
+		.axis-title-y {
+			display: none;
+		}
+	}
+
 	.backdrop-line {
 		stroke: var(--text-muted);
 		stroke-width: 1.4;

src/components/sections/findings/F2_StratifiedAdvantage.svelte

@@ -315,6 +315,22 @@
 		letter-spacing: 0.06em;
 	}
 
+	/* The chart's viewBox is 760×380 — on a ~440px-wide mobile card the SVG
+	   shrinks by ~0.58×, so 12px in SVG coords renders as ~7px on screen.
+	   Bump tick labels to keep effective size ≥80% of the description
+	   (0.9rem ≈ 14.4px → ~11.5px target). The rotated y-axis title would
+	   collide with the bigger tick labels in the cramped left margin, so we
+	   hide it — the chart description above already names the metric. */
+	@media (max-width: 820px) {
+		.tick-label-y,
+		.tick-label-x {
+			font-size: 20px;
+		}
+		.axis-title {
+			display: none;
+		}
+	}
+
 	.series-line {
 		stroke-width: 3;
 		opacity: 0.9;