Theme switcher tooltips stay on screen on mobile

binaryfire commented 1 year ago

Package

filament/filament

Package Version

3.0.60

Laravel Version

10.2.6

Livewire Version

No response

PHP Version

8.2

Problem description

The tooltips for the dark / light mode switcher stay on screen on mobile.

Expected behavior

They shouldn’t stay on screen after the switcher has closed.

Steps to reproduce

Visit https://demo.filamentphp.com/ on a mobile device. I’m using an iPhone X.

Reproduction repository

https://github.com/filamentphp/demo

Relevant log output

No response

Donate 💰 to fund this issue

You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
100% of the funding will be distributed between the Filament core team to run all aspects of the project.
Thank you in advance for helping us make maintenance sustainable!

valpuia commented 1 year ago

I am using OnePlus (android 13) and I can't reproduce this

binaryfire commented 1 year ago

Screenshots from the demo site. iPhone X, happens in both Chrome and Safari:

zepfietje commented 1 year ago

Can confirm this on iOS. Have you found a fix, @binaryfire?

binaryfire commented 1 year ago

Hey @zepfietje. Couldn't figure it out. It could be related to tippy.js or Popper (which tippy uses under the hood). Development on both libraries has been discontinued and there are lots of open issues.

I'd really recommend switching Filament over to Floating UI if you're able. It's basically Popper v2.

zepfietje commented 1 year ago

We're currently using https://github.com/ryangjchandler/alpine-tooltip, so let's ask @ryangjchandler about his opinion.

zepfietje commented 4 months ago

Replaced by https://github.com/filamentphp/filament/issues/13333.

filamentphp / filament