Skip to content

fix: prevent Calendar day cells from expanding#36286

Open
KirtiRamchandani wants to merge 1 commit into
microsoft:masterfrom
KirtiRamchandani:fix/datepicker-day-grid-width
Open

fix: prevent Calendar day cells from expanding#36286
KirtiRamchandani wants to merge 1 commit into
microsoft:masterfrom
KirtiRamchandani:fix/datepicker-day-grid-width

Conversation

@KirtiRamchandani
Copy link
Copy Markdown

Previous Behavior

Calendar day cells could expand when an app-level table-cell padding rule had higher specificity than the default day-cell padding. For example, a scoped td { padding: 15px; } rule can turn the intended 28px cell into a 58px cell, which matches the DatePicker overflow reported in #36274.

New Behavior

Calendar day cells keep their fixed sizing by using border-box sizing and a higher-specificity zero-padding rule for the day-cell slot. This keeps the day grid at its expected width even when a surrounding app has scoped table-cell padding.

Related Issue(s)

Tests

  • corepack yarn nx run react:test --testPathPatterns=CalendarDayGrid.test.tsx --runInBand --excludeTaskDependencies
  • node node_modules\\eslint\\bin\\eslint.js packages\\react\\src\\components\\CalendarDayGrid\\CalendarDayGrid.styles.ts packages\\react\\src\\components\\CalendarDayGrid\\CalendarDayGrid.test.tsx
  • node node_modules\\prettier\\bin-prettier.js --check packages\\react\\src\\components\\CalendarDayGrid\\CalendarDayGrid.styles.ts packages\\react\\src\\components\\CalendarDayGrid\\CalendarDayGrid.test.tsx change\\@fluentui-react-5e1a9878-e11f-4ae1-9cbf-71a0a7d296b9.json
  • git diff --check
  • Browser sanity check confirmed a 28px day cell under scoped external td { padding: 15px; }.

@KirtiRamchandani KirtiRamchandani requested a review from a team as a code owner June 4, 2026 15:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Expanded width of days of month in Date Picker

1 participant