Estende alla card degli eventi il fix delle date su iOS.

Il `min-w-0` di 366928b era finito solo in `ProfiloAmministrativo` perché
`Campo` e le classi degli input erano ricopiati identici in tre file: il
form «Nuovo evento» e la dashboard admin («Data tessera» in `grid-cols-2`)
sfondavano ancora la card. Ora `Campo` e `classiInput` stanno una volta
sola in `ui-bits` e le tre copie spariscono.

La regola CSS che rende ridimensionabili i controlli nativi copre anche
`input[type="time"]`, che nel form eventi sta affiancato alla data.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-05 23:41:20 +02:00
co-authored by Claude Opus 5
parent 107407b854
commit 2a1a0839c0
6 changed files with 47 additions and 60 deletions
+9 -8
View File
@@ -126,7 +126,7 @@
--ring: oklch(0.35 0.03 265);
/* Luminosità scelte perché il testo bianco sopra superi 4.5:1 (WCAG AA). */
/* Compleanni / successi: verde un po' più chiaro e saturo. */
--success: oklch(0.60 0.17 152);
--success: oklch(0.6 0.17 152);
--success-foreground: oklch(0.99 0 0);
--warning: oklch(0.78 0.15 78);
--warning-foreground: oklch(0.18 0.02 60);
@@ -528,15 +528,16 @@
}
/*
* Su iOS `input[type="date"]` è un controllo nativo con una larghezza
* intrinseca (lo spazio di «gg/mm/aaaa») che `width: 100%` non riesce a far
* scendere: dentro `grid-cols-2` due date affiancate sfondano la card, e
* l'`overflow-hidden` del pannello a tab taglia via quello che esce.
* `appearance: none` è quello che rende il campo davvero ridimensionabile;
* bordo, sfondo e padding li mette già la classe condivisa.
* Su iOS `input[type="date"]` e `input[type="time"]` sono controlli nativi con
* una larghezza intrinseca (lo spazio di «gg/mm/aaaa», «--:--») che
* `width: 100%` non riesce a far scendere: dentro `grid-cols-2` due campi
* affiancati sfondano la card, e l'`overflow-hidden` del pannello a tab taglia
* via quello che esce. `appearance: none` è quello che rende il campo davvero
* ridimensionabile; bordo, sfondo e padding li mette già la classe condivisa.
*/
@layer base {
input[type="date"] {
input[type="date"],
input[type="time"] {
min-width: 0;
appearance: none;
-webkit-appearance: none;