Add files via upload

Author: bytecode001

040-f1-constructor-standings-dashboard/script.js

@@ -171,18 +171,23 @@ function drawSummaryTable(teamData, teamColors) {
   d3.select("#summaryTable").html(tableHTML);
 }
 
-// --- D3.js animated line chart for team points evolution ---
+// --- D3.js animated, fully responsive line chart ---
 function drawLineChart(teamData, races, season, teamColors) {
   d3.select("#chart").html(""); // reset
 
+  // Responsive: use a fixed viewBox and scale to width 100%
   const margin = { top: 28, right: 24, bottom: 40, left: 58 },
-        width = 820 - margin.left - margin.right,
-        height = 380 - margin.top - margin.bottom;
+        chartWidth = 820,
+        chartHeight = 380,
+        width = chartWidth - margin.left - margin.right,
+        height = chartHeight - margin.top - margin.bottom;
 
   const svg = d3.select("#chart")
     .append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
+    .attr("viewBox", `0 0 ${chartWidth} ${chartHeight}`)
+    .attr("preserveAspectRatio", "xMinYMin meet")
+    .style("width", "100%")
+    .style("height", "auto")
     .append("g")
     .attr("transform", `translate(${margin.left},${margin.top})`);
 

040-f1-constructor-standings-dashboard/styles.css

@@ -23,6 +23,10 @@ header { grid-area: header; text-align: center; }
 main   { grid-area: main; }
 footer { grid-area: footer; text-align: center; color: #aaa; font-size: 0.98rem; margin-top: 10px; }
 
+header h1 {
+  margin-bottom: 10px;
+}
+
 .controls {
   display: flex;
   justify-content: center;
@@ -45,15 +49,20 @@ select {
   background: #181d2a;
   border-radius: 20px;
   padding: 18px 12px 22px 24px;
-  min-height: 400px;
+  min-height: 260px;
   overflow-x: auto;
   box-shadow: 0 6px 26px #0004;
   transition: box-shadow 0.3s;
+  width: 100%;
+  max-width: 100vw;
+  min-width: 0;
 }
 #chart svg {
   display: block;
   width: 100%;
   height: auto;
+  min-width: 320px;
+  max-width: 100vw;
 }
 
 #summaryTable {
@@ -103,12 +112,6 @@ select {
   box-shadow: 0 0 7px #ffda0070;
 }
 
-@media (max-width: 900px) {
-  .dashboard-grid { padding: 14px 2px 4px 2px; }
-  #chart { padding: 8px 2px 10px 6px; min-height: 320px; }
-  #summaryTable th, #summaryTable td { padding: 8px 4px; }
-}
-
 .chart-tooltip {
   pointer-events: none;
   z-index: 1000;
@@ -122,3 +125,34 @@ select {
   opacity: 0;
   transition: opacity 0.2s;
 }
+
+/* ----- MOBILE OPTIMIZATION ----- */
+@media (max-width: 900px) {
+  .dashboard-grid { padding: 14px 2px 4px 2px; }
+  #chart { padding: 8px 2px 10px 6px; min-height: 200px; }
+  #summaryTable th, #summaryTable td { padding: 8px 4px; }
+}
+
+@media (max-width: 600px) {
+  .dashboard-grid {
+    gap: 12px 0;
+    padding: 6px 1px 6px 1px;
+  }
+  header h1 {
+    font-size: 1.2rem;
+    line-height: 1.15;
+    word-break: break-word;
+    margin-bottom: 6px;
+  }
+  #summaryTable th, #summaryTable td {
+    font-size: 0.93rem;
+    padding: 7px 2px;
+  }
+  #chart {
+    padding: 4px 2px 6px 2px;
+    min-width: 0;
+  }
+  #chart svg text {
+    font-size: 1rem !important;
+  }
+}