@dnax/ui 0.0.51 → 0.0.53

package/lib/datePicker.ts

@@ -16,7 +16,7 @@ export const POPOVER_GAP = 8
 export const POPOVER_MIN_SPACE = 220
 
 /** Largeur de repli tant que le panneau n'a pas été mesuré (1er rendu) */
-export const POPOVER_FALLBACK_WIDTH = 360
+export const POPOVER_FALLBACK_WIDTH = 300
 
 /** Marge minimale de la flèche avec les coins du panneau */
 export const POPOVER_CARET_INSET = 16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -5790,7 +5790,7 @@ a.q-breadcrumbs__el:hover {
 }
 
 .q-date-picker__sheet--popover {
-  width: 360px;
+  width: 300px;
   max-width: calc(100vw - 16px);
   border: 1px solid rgb(0 0 0 / 0.08);
   box-shadow: 0 10px 32px rgb(0 0 0 / 0.16);
@@ -5809,8 +5809,8 @@ a.q-breadcrumbs__el:hover {
 .q-date-calendar {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 12px;
+  gap: 6px;
+  padding: 10px;
   user-select: none;
 }
 
@@ -5885,6 +5885,8 @@ a.q-breadcrumbs__el:hover {
 .q-date-calendar__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
+  /* Même gap que les semaines : les libellés s'alignent sur les colonnes des jours */
+  gap: 2px;
 }
 
 .q-date-calendar__weekday {
@@ -5912,7 +5914,12 @@ a.q-breadcrumbs__el:hover {
   align-items: center;
   justify-content: center;
   width: 100%;
+  /* La colonne est en `1fr` : sans plafond le cercle grandit avec la largeur du
+     panneau (popover 300px → cercles ~38px, inline large → bien plus). On borne
+     la pastille et on la centre. */
+  max-width: 34px;
   aspect-ratio: 1;
+  justify-self: center;
   padding: 0;
   border: none;
   border-radius: 50%;