Use responsive CSS custom properties for chart layout

Author: atharvas

src/components/charts/ScrollScatter.svelte

@@ -212,7 +212,7 @@
 						controlsMetric={"oracle/nop"}
 						{rangeW}
 						{rangeH}
-						padding={windowW >= 700 ? 192 : 32}
+						padding={rangeH ? rangeH * 0.2 : 32}
 					/>
 					<Range
 						min={0}
@@ -222,7 +222,7 @@
 						controlsMetric={"agent/nop"}
 						{rangeW}
 						{rangeH}
-						padding={windowW >= 700 ? 156 : 54}
+						padding={rangeW ? rangeW * 0.16 : 54}
 					/>
 				{/if}
 			</div>
@@ -311,10 +311,11 @@
 	}
 
 	.chart-container {
+		--chart-padding: clamp(2rem, 8%, 6rem);
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
-		padding: 6rem;
+		padding: var(--chart-padding);
 		position: relative;
 	}
 
@@ -362,20 +363,20 @@
 	}
 
 	.label-price {
-		top: 8.25rem;
-		left: -1.5rem;
+		top: calc(var(--chart-padding) + 2.25rem);
+		left: calc(var(--chart-padding) * -0.25);
 		transform: rotate(-90deg);
 	}
 
 	.label-rating {
-		right: 2.5rem;
-		bottom: 2rem;
+		right: calc(var(--chart-padding) * 0.4);
+		bottom: calc(var(--chart-padding) * 0.33);
 		transform: translate(-50%, 0);
 	}
 
 	.label-aggregation {
-		left: 6.5rem;
-		bottom: 2rem;
+		left: calc(var(--chart-padding) + 0.5rem);
+		bottom: calc(var(--chart-padding) * 0.33);
 		font-size: var(--14px);
 		color: var(--text-primary);
 	}
@@ -395,33 +396,17 @@
 		width: 100%;
 		height: 100%;
 		z-index: 1000;
-		padding: 6rem;
+		padding: var(--chart-padding);
 		pointer-events: none;
 		overflow: hidden;
 	}
 
 	@media (max-width: 700px) {
 		.chart-container {
-			padding: 3rem 2rem;
-		}
-
-		.range-wrapper {
-			padding: 3rem 2rem;
-		}
-
-		.label-price {
-			top: 5rem;
-			left: -2.5rem;
-		}
-
-		.label-rating {
-			right: -1.5rem;
-			bottom: -0.5rem;
+			--chart-padding: clamp(1.5rem, 6%, 3rem);
 		}
 
 		.label-aggregation {
-			left: 2.5rem;
-			bottom: -0.5rem;
 			font-size: var(--12px);
 		}
 

src/components/helpers/Range.svelte

@@ -120,15 +120,15 @@
 		transform: rotate(-90deg) translate(-100%, 0);
 		transform-origin: left top;
 		top: 4.25rem;
-		left: calc(100% - 6rem);
+		left: calc(100% - var(--chart-padding, 6rem));
 		pointer-events: auto;
 		overflow: visible;
 	}
 
 	#range-oracle-nop {
 		position: absolute;
 		pointer-events: auto;
-		left: 78px;
+		left: var(--chart-padding, 6rem);
 		top: 10%;
 	}
 
@@ -284,13 +284,13 @@
 
 	@media (max-width: 700px) {
 		#range-agent-nop {
-			left: calc(100% - 2rem);
+			left: calc(100% - var(--chart-padding, 2rem));
 			top: 1rem;
 			z-index: 1001;
 		}
 
 		#range-oracle-nop {
-			left: 1.5rem;
+			left: var(--chart-padding, 1.5rem);
 			top: calc(100% - 4rem);
 		}
 

src/components/layercake/ScrollScatter.svg.svelte

@@ -249,7 +249,7 @@
 		});
 
 		const indicators = [];
-		const padding = 20;
+		const padding = Math.max(14, Math.min(20, $width * 0.03));
 
 		// Right edge
 		if (overflow.right.length > 0) {
@@ -587,7 +587,7 @@
 			class="label equal-advantage-label"
 			x={x1}
 			y={y1}
-			transform={`translate(-30, 5) rotate(${angle}, ${x1}, ${y1})`}
+			transform={`translate(${-Math.max(20, $width * 0.04)}, 5) rotate(${angle}, ${x1}, ${y1})`}
 			text-anchor="end"
 			fill="var(--text-primary)"
 		>
@@ -637,7 +637,7 @@
 	{/if}
 	<text
 		class="label"
-		x={$width - 20}
+		x={$width - Math.max(20, $width * 0.04)}
 		y={$yScale(1.0) - 10}
 		text-anchor="end"
 		fill="var(--text-primary)"
@@ -647,7 +647,7 @@
 
 	<text
 		class="label"
-		x={$xScale(1.0) - 180}
+		x={$xScale(1.0) - Math.min(180, $width * 0.25)}
 		y={17}
 		transform={`rotate(-90, ${$xScale(1.0)}, 0)`}
 		text-anchor="start"