feat: Add automatic dropdown positioning

[MoritzWeber0]

Use the new anchor and position-try systems in CSS, available since January in all major browsers to automatically position the dropdown menu.

For horizontal positioning, automatically shift the dropdown menu to the left if there is not enough space on the screen. For vertical positioning, use scrolling to handle the overflow.

Resolves #1013

[github-actions]

Hi there! 👋

Thank you for your contribution to the FIP Guide! 🚀
We appreciate your effort in making rail staff travel information more accessible. 🚄

Checklist before merging:

• Added a description to the Pull Request
• Checked the License of new pictures (non-commercial use without attribution)
• Modified content in English
• Modified content in German
• Modified content in French

[netlify]

✅ Deploy Preview for fipguide ready!

Name	Link
🔨 Latest commit	7388fbb
🔍 Latest deploy log	https://app.netlify.com/projects/fipguide/deploys/6a4177148c5208000802d474
😎 Deploy Preview	https://deploy-preview-1014--fipguide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[lenderom]

Hi @MoritzWeber0 thank you for your implemenation :)
Is there a way to hide the scrollbar in the menu?

(I guess it only appears on smaller screens)

[MoritzWeber0]

Hi @MoritzWeber0 thank you for your implemenation :) Is there a way to hide the scrollbar in the menu?

It should only appear if the scrollbar is necessary and the content would overflow otherwise, which does happen on browser viewports with < 520px height. There are workarounds to hide scrollbars, but usually they are not really recommended as it also overwrites the system preferences regarding scrollbars. The default on Windows is to show the scrollbar, while on Android or macOS this isn't the case.

[therobrob]

Thank you Moritz – this is a cool new feature; it's just a bit complicated to figure out at first. :)

One question: the language switcher has o-dropdown__menu--above AND o-dropdown__menu--right at once. Is this correct? The properties are conflicting.

Unfortunately #1037 isn‘t solved by this PR, but we can address it in a separate PR.

[therobrob]

Should we change these to .id here as well, just like in nav-dropdown partial?

[MoritzWeber0]

Since the ids are just the identifiers of the operators here, the risk of the same id used somewhere else might be higher. But since the dropdown is the only place where the anchors are used, I'd be fine with it.

Or we use the same as the id of the element, in this case "{{ $id }}-button"? The is should be unique anyway. What do you think?

[therobrob]

Maybe we're talking at cross-purposes.
In line 1 we already initialize $id := .id, so in L 12 and 30 we can use .id instead, couldn’t we?

[MoritzWeber0]

One question: the language switcher has o-dropdown__menu--above AND o-dropdown__menu--right at once. Is this correct? The properties are conflicting.

I'll check it later.

Unfortunately #1037 isn‘t solved by this PR, but we can address it in a separate PR.

👍

[MoritzWeber0]

One question: the language switcher has o-dropdown__menu--above AND o-dropdown__menu--right at once. Is this correct? The properties are conflicting.

It's correct that the language switcher has both. One does define the horizontal positioning and one does the vertical alignment (--right means it's aligned with the right side of the button).

What wasn't correct is that the --above and --below descriptors defined rules (esp. left:) that shouldn't belong there. I fixed it.

[therobrob]

It's correct that the language switcher has both. One does define the horizontal positioning and one does the vertical alignment (--right means it's aligned with the right side of the button).

Okay got it; but why does the navbar-dropdown-menu just have o-dropdown__menu--below, but not o-dropdown__menu--left? Isn’t it somehow inconstistent?