Multi-level dropdown is not responsive.

[MattJonesSiteglide]

Describe the bug

In the mobile example for multi-level dropdowns (and in my site), the second level of dropdown falls off the edge of the page. Since the anchor text is quite short, I don't think this is due to content. See screenshot.

To Reproduce Steps to reproduce the behavior:

1. In the docs, click the mobile view for https://flowbite.com/blocks/marketing/header/#header-with-dropdown-menu .

Expected behavior

With short link titles, the 2nd level of dropdown should not overflow the edge of the page on mobile, but be positioned somewhere on the page.

I'm not sure where that somewhere should be! I think this is quite a difficult design to make responsive. Some sites would show these as a collapsible vertical list nested inside the parent component in mobile.

However, it may be possible to adjust the "popper.js" placement to get the intended behaviour.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version Version 103.0.5060.114 (Official Build) (64-bit)

Additional context Add any other context about the problem here.

[MattJonesSiteglide]

Currently I get the best results with putting data-dropdown-placement="bottom-start" on the first level, then "right-start" on the 2nd level. Though content also needs to be kept short- this seems like a good default for the example?

[zoltanszogyenyi]

Hey @MattJonesSiteglide,

Fair point, will look into this.

[MattJonesSiteglide]

Thanks! I always struggle with dropdowns on mobile myself!

[ianmuscat]

Perhaps one way to solve this would be to make the appended inline style conditional (based on the viewport size, or allow the end-user to specify at which breakpoint/s to enable it). Simply removing the absolute positioning and the translate that is dynamically added makes things much better looking on smaller devices.

Before	After