Right align drop down menus on right side of navbar

[maelle]

Bug noticed by @flor14

For vignettes with long titles, placing the articles on the right on the navbar means that the titles are truncated. The truncation also happen if the articles are on the left, for smaller screen sizes.

I'm trying to see whether adding a rule for text-wrap/max-width or the like can help. If I succeed, I'll remove the demo edits from this PR. 😇

Fixes #2476

[hadley]

Hmmm, I think this is going to be tricky to solve because currently the width of the dropdown is set by the maximum width of the text because .dropdown-item has white-space: nowrap. If we remove that, then the text wraps, but the width is now set by the minimum width of .dropdown-menu which comes from --bs-dropdown-min-width. So you'd need to set that as well.

...

Oh, maybe a better way to solve this is to right-align the dropdown, so there's all the space to the left. This requires adding the dropdown-menu-end class, https://getbootstrap.com/docs/5.3/components/dropdowns/#menu-alignment, which we could add automatically to all dropdowns in the right menu bar.

@maelle do you want to have a go at that? I think it's just a matter of adding a side = c("left", "right") to bs4_navbar_links_tags(), ensuring it gets pass all the way down from navbar_links(), and then adding the dropdown-menu-end class to menus on the right. Otherwise I can do it.

[hadley]

This looks correct to me

[hadley]

Fixes #2476 — @maelle this is good for review when you get back.

[maelle]

This won't be enough for very long titles. Should it be possible to choose a different title for the navbar. 🤔

[hadley]

Let’s merge this and then think of the mobile issue separately (#2512).