Package

react

Package version

8.110.11

React version

17.0.1

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 1.85 GB / 15.74 GB
  Browsers:
    Chrome: 148.0.7778.217
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.8115
  npmPackages:
    @fluentui/merge-styles: 8.5.14 => 8.5.14 
    @fluentui/react: 8.110.11 => 8.110.11 
    @fluentui/react-icons: ^2.0.256 => 2.0.256 
    @types/react: 17.0.45 => 17.0.45 
    @types/react-dom: 17.0.17 => 17.0.17 
    react: 17.0.1 => 17.0.1 
    react-dom: 17.0.1 => 17.0.1

Current Behavior

When I open a Fluent UI date picker, the days-of-the-month are increased in width (58px wide instead of the usual 28px), causing them to overflow to the months-of-the-year side of the picker.

The issue is unfortunately intermittent.

Expected Behavior

The days-of-the-month should be 28 x 28px as they usually are.

Reproduction

https://codepen.io/Drenam1/pen/emBVGOb

Steps to reproduce

1. Click on the input box to open the date picker dropdown.
   As stated above, the issue is intermittent but as you can see we are not applying any styling that would add 30px of extra width to that area of the component.

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.