search

filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
18.09k stars 2.83k forks source link

Global search results dropdown is clipped on Safari #8215

Closed fauzie811 closed 1 year ago

fauzie811 commented 1 year ago

Package

filament/filament

Package Version

v3.0.27

Laravel Version

v10.19.0

Livewire Version

v3.0.1

PHP Version

PHP 8.1.0

Problem description

The global search results dropdown is clipped on Safari 16.5 on macOS Monterey 12.6.6 when the results total height is less than the dropdown's max height, i.e.: no scrollbar.

Has scrollbar:

Screen Shot 2023-09-01 at 19 27 01

No scrollbar:

Screen Shot 2023-09-01 at 19 27 20

Expected behavior

The dropdown shouldn't be clipped.

Steps to reproduce

Search for anything specific where there's only a few results.

Reproduction repository

https://github.com/filamentphp/demo

Relevant log output

No response

github-actions[bot] commented 1 year ago

Hey @fauzie811! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

zepfietje commented 1 year ago

I've looked into this issue but can't find a way to fix it... It seems like a Safari bug, as it doesn't happen in other browsers, but I can't even find any references of it on the internet.

Would be great if someone else could try and find the bug/fix.

howdu commented 1 year ago

@zepfietje it's related to the overflow-x-clip on fi-topbar. If you remove this it displays correctly.

zepfietje commented 1 year ago

Good catch, @howdu! We need that class though, as it's required to clip the shadows on the topbar and prevent them from overflowing onto the sidebar header...

danharrin commented 1 year ago

Are we not able to use z-index somehow

zepfietje commented 1 year ago

I tried... to no avail. 🥲

zepfietje commented 1 year ago

Fixed by https://github.com/filamentphp/filament/commit/0c49de8f3070e6cec99b33085c2c61d67fd4e078 and https://github.com/filamentphp/filament/commit/a2d3ddf1cccb8c6807047abe346d55acc8ad507a.