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;