[BUG] Dropdown Switching Sides on Small Screens

[MadsBuchmann]

• I have written a good issue

Describe the bug

When viewing the dropdown component in the cookbook on my iPhone SE it keeps switching side horizontally every time I open it.

This also happens if I do it in Safari in responsive mode with resolution set to 320 x 568.

See the below video:

RPReplay_Final1627040755.MP4

Describe how to reproduce the bug

1. Open Safari in responsive design mode with resolution set to 328 x 568.
2. Go to the 'dropdown' cookbook page on an iPhone SE.
3. Repeatedly press the dropdown and see how it keeps switching side.

Which Kirby version was used?

3.0.1

What was the expected behavior?

The dropdown keeps opening to the same side.

Please complete the following information:

• OS: iOS
• Browser: Safari
• Browser version: Whichever version is shipped with iOS v. 14.7

Are there any additional context?

This could potentially be solved by the new popover functionality introduced in PR #1671

---

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.