updated hittimeline

Author: Artcapella

index.html

@@ -129,7 +129,7 @@ <h4>Scores at time: <span id="matchTime">00:00.000</span></h4>
 					<button id="resetTimeRange">Reset</button>
 					<span id="timelineRangeDisplay" style="margin-left:10px;font-size:12px;color:#666;">Full timeline</span>
 				</div>
-				<div id="timelineChart" style="overflow-x:auto;"></div>
+				<div id="timelineChart"></div>
 			</div>
 			<!-- Hexagon Radar Chart -->
 			<div class="chart-container">

styles.css

@@ -79,30 +79,64 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	margin-bottom: 10px;
-	padding: 5px;
+	margin-bottom: 5px;
+	padding: 2px 5px;
 	font-size: 12px;
+	height: 20px;
+	width: 100%;
+	box-sizing: border-box;
+	flex-shrink: 0;
 }
 
 .timeline-controls label {
 	margin-right: 3px;
 }
 
 .timeline-controls button {
-	padding: 3px 8px;
+	padding: 2px 6px;
 	border: 1px solid #ccc;
 	border-radius: 3px;
 	background: #f8f8f8;
 	cursor: pointer;
-	font-size: 11px;
+	font-size: 10px;
+	height: 18px;
 }
 
 .timeline-controls button:hover {
 	background: #e8e8e8;
 }
 
+.timeline-controls input {
+	height: 16px;
+	padding: 1px 3px;
+	font-size: 10px;
+}
+
+/* Override chart-container for timeline - make it flex container */
+.chart-container:has(.timeline-controls) {
+	min-height: 250px !important;
+	height: 250px;
+	display: flex;
+	flex-direction: column;
+}
+
+.chart-container:has(.timeline-controls) > div {
+	flex: none;
+	min-height: auto;
+}
+
+#timelineChart {
+	overflow-x: auto;
+	width: 100%;
+	max-width: 100%;
+	flex: 1;
+	box-sizing: border-box;
+}
+
 #timelineChart svg {
-	min-width: 1200px;
+	width: 100%;
+	height: 100%;
+	max-width: 100%;
 }
 
 .score-progression-container {

visualizations/hitTimeline.js

@@ -366,11 +366,12 @@ class LaserTagHitTimeline extends LaserTagVisualizations {
 	createScrollableTimeline(hits) {
 		const container = this.getContainer();
 
-		// Set up dimensions for scrollable timeline
-		const margin = { top: 20, right: 20, bottom: 60, left: 40 };
-		// Make timeline wider to enable horizontal scrolling
-		const width = Math.max(1200, hits.length * 8) - margin.left - margin.right;
-		const height = 400 - margin.top - margin.bottom;
+		// Set up dimensions for responsive timeline
+		const margin = { top: 20, right: 20, bottom: 40, left: 40 };
+		// Use actual container width, don't force minimum
+		const containerWidth = container.offsetWidth || 300;
+		const width = containerWidth - margin.left - margin.right - 20;
+		const height = 200 - margin.top - margin.bottom;
 
 		const svg = d3.select('#timelineChart')
 			.append('svg')