search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
20.71k stars 1.27k forks source link

[BUG] - DatePicker wrong width #3128

Open matheusboeira opened 1 month ago

matheusboeira commented 1 month ago

NextUI Version

2.4.0

Describe the bug

When opening the date picker calendar, if using internationalization, the calendar width gets "flattened". However, this only happens when the "showMonthAndYearPickers" property is set.

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-hlgmdv?file=src%2Fcomponents%2FProblemDatePicker.tsx,src%2Fcomponents%2FPages.tsx

Steps to Reproduce the Bug or Issue

  1. Set locale="pt" prop to NextUIProvider
  2. Click the button to open the calendar in the date picker.

Expected behavior

As a user, I expect the calendar not to be flattened like the English version.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/76896958/3456db90-ef37-4556-b55f-08f387ddf094

Operating System Version

macOS

Browser

Chrome

linear[bot] commented 1 month ago

ENG-925 [BUG] - DatePicker wrong width

matteogilioli commented 1 month ago

Same problem with it localization

ryo-manba commented 1 month ago

How is the browser zoom set? There is a reported bug where the display breaks when it is not at 100%. In the environment you provided, the issue did not occur at 100% zoom. See: https://github.com/nextui-org/nextui/issues/2978

matheusboeira commented 1 month ago

@ryo-manba, this happens regardless of zoom.

https://github.com/nextui-org/nextui/assets/76896958/3526e34e-fad0-441b-9529-73a9d4b32d25

aayush-goyal commented 1 month ago

@matheusboeira the link you provided seems to work fine for me. Is there anything I am missing?