[x] I have searched the Issues to see if this bug has already been reported
[x] I have tested the latest version
Steps to reproduce
I have found multiple issues with the default flowbite-react modals when viewed on mobile. I initially found these issues in my own app and then later discovered they are also broken on the official flowbite-react docs website.
a. The modal appears so high up that the close "X" button is not visible, making some of the modals in the examples screen unclosable
b. The modals do not appear centred by default (I could understand this is a stylistic decision, but it's a bit strange to have pop-ups appear at the top of the screen)
c. If you go into developer tools and add lots of extra text to one of the modals, you will see it will expand so far below down to the screen that the padding & rounded corners of the modal dissappear on the bottom. This only happens on chrome & safari.
Expected behavior
I would expect Modals to be fully visible and centred by default, and not require theme overwrites to accomplish this.
I would expect the padding around the modal to always be visible even as the content of the modal grows.
Context
Environments:
Tested on iOS devices using chrome, firefox & safari
Tested in an android emulator using only chrome
Issue not present on desktop, and also not on desktop when using the "Responsive Design Mode", only happens on-device
Fix suggestions:
Problem a and b can be quite simply solved by using flex and centring the modal with justify-content
Using max-h-[90vh] is pretty bad as vh is treated differently by different browsers on mobile. For example safari and chrome will think of the "view height" as extending under & below the browser's own footer UI element, while Firefox thinks of "view height" as until its own footer UI element.
It would be better to remove the vh usage here and allow the modal to just expand to max-height 100% then it will always stay within the padding of its parent element.
Please solve it quickly. The modal cannot be placed. And can the modal height be set automatically? I want to give the style myself, but it doesn't apply.
Steps to reproduce
I have found multiple issues with the default flowbite-react modals when viewed on mobile. I initially found these issues in my own app and then later discovered they are also broken on the official flowbite-react docs website.
Current behavior
Expected behavior
Context
Environments:
Fix suggestions:
max-h-[90vh]
is pretty bad asvh
is treated differently by different browsers on mobile. For example safari and chrome will think of the "view height" as extending under & below the browser's own footer UI element, while Firefox thinks of "view height" as until its own footer UI element.vh
usage here and allow the modal to just expand to max-height100%
then it will always stay within the padding of its parent element.height: 100%
instead: https://github.com/themesberg/flowbite-react/blob/4f0399b50b23ec24ded67681f3290a8fbf653920/src/components/Modal/theme.ts#L5I was able to solve these problems in my app with the following theme override:
Hope this helps!