From 83219fd607fba4eb96b0d7f5343001b3da222512 Mon Sep 17 00:00:00 2001
From: Jonathan Berrisch <Jonathan@Berrisch.biz>
Date: Sun, 18 May 2025 22:45:13 +0200
Subject: [PATCH] Align input width and plot width

---
 app.qmd | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app.qmd b/app.qmd
index fce998d..81cdf39 100644
--- a/app.qmd
+++ b/app.qmd
@@ -79,6 +79,13 @@ chart = {
    const margin = {top: 40, right: 20, bottom: 40, left: 40};
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
+   // Set container width to match SVG plot width
+   container.style("max-width", `${width}px`).style("width", "100%");
+   // Set controls container width to match SVG plot width
+   controlsContainer.style("max-width", `${width}px`).style("width", "100%");
+   // Distribute each control evenly and make sliders full-width
+   controlsContainer.selectAll("div").style("flex", "1").style("min-width", "0px");
+   controlsContainer.selectAll("input").style("width", "100%").style("box-sizing", "border-box");
    
    // Create scales
    const x = d3.scaleLinear()