Non taglia più l'anello del giorno corrente
Regressione mia, introdotta con lo swipe in 9b28a86: la griglia è avvolta in
un `overflow-hidden` che serve a nascondere il mese che entra ed esce di lato.
L'anello del giorno corrente però è `ring-2 ring-offset-1`, quindi disegna 3 px
FUORI dai bordi della cella: sulla prima riga quei 3 px cadono oltre il bordo
del riquadro di ritaglio e vengono tagliati. Sarebbe successo lo stesso
sull'ultima riga e sulle colonne di bordo, se oggi fosse caduto di lunedì o di
domenica.
`p-1` sul contenitore che ritaglia dà all'anello i suoi 4 px di aria dentro il
riquadro; `-mx-1` e `mt-1` al posto di `mt-2` rimettono la griglia esattamente
dov'era, quindi le celle non si spostano di un pixel: cambia solo dove passa il
bordo di ritaglio.
Non si può usare `overflow-x: hidden` da solo: in CSS, se un asse è `hidden` e
l'altro `visible`, quello visibile diventa `auto` e ritaglia comunque, per
giunta creando uno scroll container.
Scartato anche `ring-inset`, che non può essere tagliato per costruzione: nei
giorni in cui oggi coincide con un evento l'anello scuro finirebbe appiccicato
al colore pieno, senza lo stacco bianco che ha adesso.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -208,8 +208,14 @@ function Calendario() {
|
|||||||
decelerazione dello scroll iOS), non dalla posizione del dito.
|
decelerazione dello scroll iOS), non dalla posizione del dito.
|
||||||
`dragElastic` dà la resistenza progressiva al bordo invece di
|
`dragElastic` dà la resistenza progressiva al bordo invece di
|
||||||
uno stop netto.
|
uno stop netto.
|
||||||
|
|
||||||
|
`p-1` con `-mx-1` compensato: l'anello del giorno corrente
|
||||||
|
(`ring-2 ring-offset-1`) sporge 3 px fuori dalla cella, e senza
|
||||||
|
questo margine interno `overflow-hidden` lo taglia sulla prima
|
||||||
|
riga e sulle colonne di bordo. Il padding sta dentro il riquadro
|
||||||
|
di ritaglio, i margini negativi rimettono la griglia dov'era.
|
||||||
*/}
|
*/}
|
||||||
<div className="relative mt-2 overflow-hidden">
|
<div className="relative -mx-1 mt-1 overflow-hidden p-1">
|
||||||
<AnimatePresence initial={false} mode="popLayout" custom={direzione}>
|
<AnimatePresence initial={false} mode="popLayout" custom={direzione}>
|
||||||
<motion.div
|
<motion.div
|
||||||
key={mesePrefix}
|
key={mesePrefix}
|
||||||
@@ -296,7 +302,7 @@ function Calendario() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-3 text-xs text-muted-foreground">
|
<p className="mt-2 text-xs text-muted-foreground">
|
||||||
Scorri a destra o sinistra per cambiare mese.
|
Scorri a destra o sinistra per cambiare mese.
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-3 flex flex-wrap gap-3 text-xs font-semibold text-muted-foreground">
|
<div className="mt-3 flex flex-wrap gap-3 text-xs font-semibold text-muted-foreground">
|
||||||
|
|||||||
Reference in New Issue
Block a user