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:
+9
-8
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user