[Enhancement] Support horizontally centered dropdown

[askarby]

• [x] I have written a good issue

Describe the bug

When placing a kirby-dropdown component not aligned "to the left" or "to the right" of the screen (on a smaller device, in this example a iPhone X) the dropdown cannot be fully rendered.

It would be great to have a dropdown strategy where the options are not clipped, even though the dropdown is placed horizontally.

Describe how to reproduce the bug

1. Place a kirby-dropdown horizontally centered on the screen
2. Emulate a iPhone X (narrow the window accordingly)
3. Trigger the drop-down to display
4. See that it won't display fully on the screen!

Which Kirby version was used?

3.0.15

What was the expected behavior?

The drop-down will display (fully) on the screen - perhaps centered?

Add any screenshots

Please complete the following information:

• OS: MacOS
• Browser Chrome
• Browser version 93

Are there any additional context?

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

• [ ] Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done

Implementation

The contributor who wants to implement this issue should:

• [ ] Make sure you have read: "Before you get coding".
• [ ] Signal to others you are working on the issue by assigning yourself.
• [ ] Create a branch from the master branch following our branch naming convention.
• [ ] Create a test that reproduces the bug following guidelines in: "The good: Test".
• [ ] Write code to fix the bug

Review

Once the issue has been implemented and is ready for review:

• [ ] Do a self-review.
• [ ] Create a pull-request.

[RasmusKjeldgaard]

I believe this is a duplicate of #1683. We are currently implementing new 'Popover' functionality that should hopefully mitigate this. You can follow along in #1671.

[RasmusKjeldgaard]

Reopening this, as there were more nuances to it than I first thought. I have removed the parts of this issue that duplicated #1683, but there is still a need for a strategy for placing dropdowns beside each other, or horizontally centered. E.g. situations where one or more dropdowns are not right or left aligned. I have updated the issue description accordingly.

[RasmusKjeldgaard]

This is also a problem when the app is running on an android device. So not only related to specific device or browser.

[stale[bot]]

This issue has been automatically marked as stale because of no recent activity. It will be closed in 10 weeks if no further activity occurs. Thank you for your contributions.

[LVinther]

Writing comment to remove stale label :)

[henrikvoetmand]

UX refinement: Define max width of popover layer (425px?) When viewport is smaller, set the popover width to 100% (of the container) No matter the dropdown button horizontal position. When viewport is larger than max width - have the option to left, right or center the horizontal, position (relative to the dropdown btn)

[MadsBuchmann]

Before we do this - we should consider whether we should use the popover functionality introduced in #1671. This requires also solving #1793. Perhaps by always displaying the scrollbar? (see this tech refinement from #1543).