primereact icon indicating copy to clipboard operation
primereact copied to clipboard

Dropdown: Safari rendering issue with small fixed width

Open KubaGorka opened this issue 1 year ago • 0 comments

Describe the bug

In Safari, when a small fixed width is applied to a dropdown, the scrollbar is not rendered correctly. The width of the dropdown is not big enough to render the content , causing the items with long labels inside the dropdown to be 'squished'. This only happens when there are enough items in the list and the scroll becomes necessary. I suspect it has something to do with the way Safari handles the overflow auto option and the way it adds the scrollbar, as it's different than in other browsers. Screenshot from chrome: Screenshot 2024-09-27 at 12 17 29 Screenshot from safari: Screenshot 2024-09-27 at 12 17 19

Reproducer

https://stackblitz.com/edit/fhik6h-wwhyzz?file=src%2FApp.jsx

System Information

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 88.42 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    primereact: latest => 10.8.3 
    react: 18.3.1 => 18.3.1 
  Browsers:
    Chrome: 129.0.6668.70
    Safari: 17.5

Steps to reproduce the behavior

  1. Set a small fixed width on a dropdown.
  2. Add enough items so a scroll will appear.
  3. Open the dropdown.

Expected behavior

Dropdown width should be bigger in safari when scrollbar is present.

KubaGorka avatar Sep 27 '24 11:09 KubaGorka