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:
@@ -156,6 +156,27 @@ export function SezioneTendina({
|
||||
);
|
||||
}
|
||||
|
||||
/** Classi condivise di input, select e textarea nei form dell'app. */
|
||||
export const classiInput =
|
||||
"w-full min-w-0 rounded-xl border border-border bg-background px-3 py-2 text-sm";
|
||||
|
||||
/**
|
||||
* Etichetta + controllo di un form. `min-w-0`: dentro `grid-cols-2` questa label
|
||||
* è l'elemento di griglia e ha `min-width: auto`, quindi si allarga fino al
|
||||
* contenuto invece di stare nella colonna. Con un controllo nativo largo dentro
|
||||
* (una data o un'ora su iOS) la coppia sfonda la card.
|
||||
*/
|
||||
export function Campo({ label, children }: { label: string; children: ReactNode }) {
|
||||
return (
|
||||
<label className="block min-w-0">
|
||||
<span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
|
||||
{label}
|
||||
</span>
|
||||
<span className="mt-1 block">{children}</span>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatoBadge({ stato, className }: { stato: Stato; className?: string }) {
|
||||
const meta = statoMeta[stato];
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user