demo a website with long titles on the right

[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. :innocent:

[maelle]

For the case with articles on the right, one thing that works is replacing the "left" below with "right"

.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: var(--bs-dropdown-spacer);
}

Now, what'd be nice is something with the overflow, overflow -> wrap which I don't know yet how to get.

[maelle]

Giving up for now.

[flor14]

The titles are now readable after changing the order of the navbar elements, as you suggested, @maelle https://docs.ropensci.org/quadkeyr/

[maelle]

@flor14 that's a relief!

There's still a problem for small screen sizes:

[maelle]

@hadley is this a scrollburglar too?

[hadley]

This is sort of the opposite of a scrollburglar because you can't scroll to see the full title.

[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.

[maelle]

Also noting we want the maximum width to be the screen width, probably?

[maelle]

In the examples in the docs, they use ul and li, whereas the dropdown here uses div and ad directly. Giving up for now.

[hadley]

Ok, I'll finish this off 😄

[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. :thinking:

[hadley]

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