From 718ca499c41077039b48b105c1a60a2599452cdd Mon Sep 17 00:00:00 2001 From: Adriano Dal Pastro Date: Tue, 1 Sep 2026 08:55:14 +0000 Subject: [PATCH] Calendario: le sette colonne dei giorni tutte della stessa larghezza MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Chiesto da Adriano. La tabella era in layout automatico, quindi il browser dimensionava ogni colonna sul contenuto: il sabato, che porta la nota «solo il 12 settembre», veniva largo quasi il doppio, e i giorni senza class si stringevano. Una griglia oraria con le colonne di misure diverse si legge male proprio dove serve — nell'incrocio fra un giorno e un'ora. `table-layout: fixed` piu' una larghezza sulla sola colonna delle ore (64px): tutto il resto viene diviso in parti uguali fra le sette dei giorni. E' lo stesso criterio che il PDF applica da sempre — la' le colonne sono `(larghezzaUtile - larghezzaOra) / GIORNI.length` — quindi adesso le due versioni dello stesso foglio si somigliano invece di divergere. La colonna delle ore resta piu' stretta dei giorni, come nel PDF: ci sta dentro «12.15» e nient'altro. 185 test verdi. Co-Authored-By: Claude Opus 5 (1M context) --- src/components/CalendarioModal.astro | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/CalendarioModal.astro b/src/components/CalendarioModal.astro index 248f51b..1df8b7b 100644 --- a/src/components/CalendarioModal.astro +++ b/src/components/CalendarioModal.astro @@ -173,7 +173,13 @@ const disciplinePresenti = (cal: Calendario) => /* La griglia ha otto colonne: su telefono scorre in orizzontale invece di comprimersi fino a diventare illeggibile, e la colonna delle ore resta ferma. */ - .cal-tab { border-collapse: collapse; width: 100%; min-width: 720px; } + /* `table-layout: fixed` e' quello che rende le sette colonne dei giorni ESATTAMENTE + uguali: in automatico il browser le dimensiona sul contenuto, cosi' il sabato con la + nota «solo il 12 settembre» diventava largo il doppio e i giorni vuoti si stringevano. + Con il layout fisso basta dare una larghezza alla colonna delle ore: tutto il resto + viene diviso in parti uguali fra le sette rimanenti. E' lo stesso criterio del PDF, + dove le colonne sono `(larghezzaUtile - larghezzaOra) / 7` da sempre. */ + .cal-tab { border-collapse: collapse; width: 100%; min-width: 720px; table-layout: fixed; } .cal-tab th, .cal-tab td { border: 1px solid #e4e0d9; padding: 9px 10px; text-align: left; } .cal-tab thead th { background: var(--c-bg-alt); @@ -184,6 +190,9 @@ const disciplinePresenti = (cal: Calendario) => display: block; font-size: .62rem; letter-spacing: .06em; text-transform: none; color: var(--c-text-light); font-weight: 400; } + /* L'unica larghezza dichiarata: la colonna delle ore. Resta piu' stretta dei giorni, + come nel PDF — ci sta dentro «12.15» e nient'altro. */ + .cal-tab__ora-h, .cal-tab__ora { width: 64px; } .cal-tab__ora-h { color: var(--c-accent-dark) !important; } .cal-tab__ora { background: var(--c-bg);