Impedisce ai campi data di sfondare la card del tesseramento su iOS.
In `grid-cols-2` l'elemento di griglia è la label di `Campo`, che ha `min-width: auto` e quindi non scende sotto la larghezza del contenuto. Su iOS `input[type="date"]` è un controllo nativo con una larghezza intrinseca che `width: 100%` non riduce: le due date affiancate sfondavano la card e l'`overflow-hidden` del pannello a tab tagliava via quello che usciva. `min-w-0` sulla label e sulla classe condivisa degli input, più `min-width: 0` e `appearance: none` sulle sole date — è `appearance` a rendere il controllo davvero ridimensionabile, e restando sulle date il select tiene la sua freccia. Il fix sta in `CampiProfilo`, quindi copre anche la dashboard amministratore. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -527,6 +527,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
@layer base {
|
||||
input[type="date"] {
|
||||
min-width: 0;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus da tastiera sempre visibile: nessun controllo custom lo definiva. */
|
||||
@layer base {
|
||||
:focus-visible {
|
||||
|
||||
Reference in New Issue
Block a user