From b11ef88bcadb84e26f998c84f2e3e5380341f923 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 22 May 2026 02:06:26 +0200 Subject: [PATCH] fix(month-grid, year-grid): stretch to popover content width inside picker MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When a MonthGrid / YearGrid is rendered inside a DatePicker.Content popover (via DatePicker.MonthView / YearView), the grid was using inline-size:max-content while the picker-shell Footer below it stretched to the popover's full content width — leaving an empty band to the right of each row of cells. Scope the override to `[data-popover-content]` so the standalone grids on their own demos keep their natural max-content sizing. Inside the popover, the grid root and the inner [data-*-grid] both stretch to 100% so the 3 columns (minmax(0, 1fr)) distribute across the same inline size as the footer. Also added box-sizing: border-box to both grid roots so the padding + border don't push them past the popover content area. Verified at /uix/components/date-picker with kind='year' size='md': popover content width = 288px, year-grid width = 262px (= footer width), inner grid = 228px (= grid container minus padding). 3 columns align flush to the footer row above. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/eidos/components/month-grid/month-grid.css | 11 +++++++++++ src/uix/eidos/components/year-grid/year-grid.css | 11 +++++++++++ 2 files changed, 22 insertions(+) diff --git a/src/uix/eidos/components/month-grid/month-grid.css b/src/uix/eidos/components/month-grid/month-grid.css index e3d4b76ae..eaac473e1 100644 --- a/src/uix/eidos/components/month-grid/month-grid.css +++ b/src/uix/eidos/components/month-grid/month-grid.css @@ -16,6 +16,7 @@ gap: var(--calendar-gap); inline-size: max-content; max-inline-size: 100%; + box-sizing: border-box; padding: var(--_month-grid-padding); border: var(--calendar-border-width) solid var(--calendar-border); border-radius: var(--calendar-radius); @@ -185,6 +186,16 @@ max-inline-size: 100%; } +/* When the month-grid sits inside a popover (DatePicker.MonthView), stretch + to the popover's content width so the cells distribute across the same + inline size as the picker-shell footer. */ +[data-popover-content] [data-month-grid] { + inline-size: 100%; +} +[data-popover-content] [data-month-grid-grid] { + inline-size: 100%; +} + [data-month-grid-cell] { display: inline-flex; align-items: center; diff --git a/src/uix/eidos/components/year-grid/year-grid.css b/src/uix/eidos/components/year-grid/year-grid.css index ecb5a6394..f40af437b 100644 --- a/src/uix/eidos/components/year-grid/year-grid.css +++ b/src/uix/eidos/components/year-grid/year-grid.css @@ -16,6 +16,7 @@ gap: var(--calendar-gap); inline-size: max-content; max-inline-size: 100%; + box-sizing: border-box; padding: var(--_year-grid-padding); border: var(--calendar-border-width) solid var(--calendar-border); border-radius: var(--calendar-radius); @@ -185,6 +186,16 @@ max-inline-size: 100%; } +/* When the year-grid sits inside a popover (DatePicker.YearView), stretch + to the popover's content width so the cells distribute across the same + inline size as the picker-shell footer. */ +[data-popover-content] [data-year-grid] { + inline-size: 100%; +} +[data-popover-content] [data-year-grid-grid] { + inline-size: 100%; +} + [data-year-grid-cell] { display: inline-flex; align-items: center;