fix(ui): una cornice sola, e smette di spostarsi sotto le dita

Punto 14. La segnalazione dell'operatore del 28/07 non era stata circoscritta sul
codice: «le dimensioni delle viste cambiano a seconda del menu». Sono quattro
meccanismi distinti, tutti leggibili senza avere il tablet in mano.

Ogni vista si dichiarava la propria larghezza: sette valori diversi su diciassette
template, e nessuno coincideva con quello della navbar, che sta a max-w-7xl su
tutte. Il contenuto era quindi disallineato dalla barra sopra di sé, e il
disallineamento cambiava a ogni pagina. Il percorso dell'operatore faceva
1280 → 1024 → tutto schermo → 1280 in quattro passaggi.

Il padding verticale mescolava py-8 e py-6 fra viste consecutive, così la prima
card cambiava altezza a ogni schermata.

La barra di scorrimento è classica da 8px e occupa spazio: una pagina lunga la
mostrava, una corta no, e la schermata di misura la toglie sempre. A ogni
navigazione tutto il contenuto centrato — navbar compresa — si spostava di 8px.

La schermata di misura era alta 100vh, che su Android e iOS è l'altezza con la
barra dell'indirizzo nascosta: su un tablet il piede, dove stanno «Fine ciclo
misura» e il tastierino, finiva sotto il bordo.

Ora: .tmf-page e .tmf-page-narrow in themes.css, con i valori esatti della navbar;
scrollbar-gutter: stable; 100dvh dove serve. Due larghezze in tutto il prodotto al
posto di sette, e il criterio è il tipo di pagina — liste, tabelle e tele stanno
larghe, i moduli stanno stretti.

Login e schermata di misura tengono la loro geometria, per i motivi scritti in
docs/architecture/LAYOUT.md e ripetuti in EXEMPT dentro il test: la prima non ha
navbar a cui allinearsi, la seconda non deve scorrere mentre si misura.

Il test è statico e guarda i sorgenti: la vista scritta domani copierà la cornice
dalla vicina, ed è lì che la deriva ricomincia.

Resta da chiedere all'operatore su quale schermo l'ha vista: in verticale su un
tablet quasi tutte quelle larghezze collassano e il difetto non si nota.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/frontend/flask_app/static/css/themes.css

@@ -124,10 +124,66 @@ textarea:focus-visible {
 }
 
 
+/* ============================================================
+   Page shell — one frame for every view
+
+   Punto 14. Ogni schermata si disegnava la propria larghezza: sette valori
+   diversi fra le viste, nessuno allineato alla navbar, che sta a 80rem su
+   tutte. Passando da un menu all'altro il blocco di contenuto cambiava
+   larghezza e si spostava rispetto alla barra sopra di sé.
+
+   Qui la cornice è una sola e coincide con quella della navbar. Le pagine
+   che hanno bisogno di una colonna stretta - i moduli - la stringono al loro
+   interno: il bordo della pagina resta dov'è, cambia solo il contenuto.
+   ============================================================ */
+
+.tmf-page {
+  width: 100%;
+  max-width: 80rem;          /* == max-w-7xl, la stessa della navbar */
+  margin-inline: auto;
+  padding-inline: 1rem;      /* == px-4  */
+  padding-block: 1.5rem;     /* == py-6  */
+}
+
+@media (min-width: 640px) {
+  .tmf-page { padding-inline: 1.5rem; }   /* == sm:px-6 */
+}
+
+@media (min-width: 1024px) {
+  .tmf-page { padding-inline: 2rem; }     /* == lg:px-8 */
+}
+
+/* I moduli restano su una colonna leggibile: un campo di testo largo 1280px non
+   si compila meglio, si compila peggio. Due larghezze in tutto il prodotto -
+   questa e quella sopra - al posto delle sette di prima. */
+.tmf-page.tmf-page-narrow {
+  max-width: 56rem;          /* == max-w-4xl */
+}
+
+
 /* ============================================================
    Custom Scrollbar
    ============================================================ */
 
+/* Lo spazio della barra di scorrimento è riservato sempre, anche quando la
+   pagina non scorre. Senza, ogni passaggio fra una vista lunga e una corta -
+   e ogni ingresso nella schermata di misura, che blocca lo scorrimento -
+   spostava di 8px tutto il contenuto centrato, navbar compresa. */
+html {
+  scrollbar-gutter: stable;
+}
+
+/* La schermata di misura è alta quanto la finestra vera, non quanto quella
+   teorica: su Android e iOS `100vh` è l'altezza che la pagina avrebbe con la
+   barra dell'indirizzo nascosta, quindi su un tablet il piede - dove stanno
+   «Fine ciclo misura» e il tastierino - finisce sotto il bordo dello schermo, e
+   ricompare quando la barra si ritrae. `100dvh` segue la finestra reale. */
+@supports (height: 100dvh) {
+  body.h-screen {
+    height: 100dvh;
+  }
+}
+
 /* Webkit (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
   width: 8px;