From 5b7ba0ad692218eaefa0071d44d469041fc8f4f5 Mon Sep 17 00:00:00 2001
From: clerie <git@clerie.de>
Date: Sun, 6 Jul 2025 20:49:11 +0200
Subject: [PATCH] Properly size css grid

---
 web/drafting-board.js |  5 ++++-
 web/style.css         | 12 ++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/drafting-board.js b/web/drafting-board.js
index 4a6e0d8..d027e77 100644
--- a/web/drafting-board.js
+++ b/web/drafting-board.js
@@ -65,6 +65,9 @@ export function drawDraftingBoard() {
 
 	let rows = display_legs.length;
 
+	element_board.style.setProperty("--drafting-board-number-locations", display_locations.length);
+	element_board.style.setProperty("--drafting-board-number-legs", rows);
+
 	for (let display_location of display_locations) {
 		let el_location_name = EL("div", {
 			class: [ "station-name" ],
@@ -85,7 +88,7 @@ export function drawDraftingBoard() {
 				"grid-column-start": grid_location_indexes[display_location.id]["column-start"],
 				"grid-column-end": grid_location_indexes[display_location.id]["column-end"],
 				"grid-row-start": 2,
-				"grid-row-end": rows + 2,
+				"grid-row-end": rows + 3,
 
 			},
 		});
diff --git a/web/style.css b/web/style.css
index 6525968..b8b9f80 100644
--- a/web/style.css
+++ b/web/style.css
@@ -119,14 +119,14 @@ input.form-control {
 #drafting-board-content {
 	display: grid;
 
-	min-width: 1000px;
-	min-height: 300px;
+	min-width: 100%;
+	min-height: 100%;
 
-	grid-template-columns: repeat(auto-fit, minmax(200px, auto) 2px minmax(200px, auto));
-}
+	--drafting-board-number-locations: 0;
+	--drafting-board-number-legs: 0;
 
-#drafting-board div {
-	min-height: 0px;
+	grid-template-columns: repeat(var(--drafting-board-number-locations), minmax(200px, auto) 2px minmax(200px, auto));
+	grid-template-rows: min-content repeat(var(--drafting-board-number-legs), minmax(0px, min-content)) auto;
 }
 
 #drafting-board .station-name {