From 6e05f5134f8237de35108e17323448d24253338a Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 15:15:36 +0200
Subject: [PATCH] =?UTF-8?q?Non=20taglia=20pi=C3=B9=20l'anello=20del=20gior?=
 =?UTF-8?q?no=20corrente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/routes/calendario.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/routes/calendario.tsx b/src/routes/calendario.tsx
index b558334..723119e 100644
--- a/src/routes/calendario.tsx
+++ b/src/routes/calendario.tsx
@@ -208,8 +208,14 @@ function Calendario() {
               decelerazione dello scroll iOS), non dalla posizione del dito.
               `dragElastic` dà la resistenza progressiva al bordo invece di
               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}>
                 <motion.div
                   key={mesePrefix}
@@ -296,7 +302,7 @@ function Calendario() {
                 </motion.div>
               </AnimatePresence>
             </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.
             </p>
             <div className="mt-3 flex flex-wrap gap-3 text-xs font-semibold text-muted-foreground">