Righthand-nav visually odd now

[larseggert]

What happened?

There were some recent changes in feat/bs5 that allowed pulling in extra content (mainly for the agenda page).

The resulting DOM structure for the righthand-nav now seem somewhat odd. There are card elements in there whose purpose I don't understand and that add add visual elements (borders, spacing) that wasn't there before.

More importantly though, what's being added to the nav isn't actually shown in a useful way, as it's being horizontally truncated. See below for a comparison between 3234f1a (top) and 3619d3b (bottom, current):

What browser(s) are you seeing the problem on?

Not Applicable

Code of Conduct

• I agree to follow the IETF's Code of Conduct

[rjsparks]

To be clear, this happens as the window narrows.
If the window narrows a little more, the righthand-nav is hidden.
The trigger for that hiding needs to be taken into account.

The PR that brought the cards in explained them, I think, (ability to add things like showing the selected timezone) but Jennifer can provide more detail here.

[larseggert]

As the column narrows, the contents should wrap - this is what happened before (you can see that the headings span two lines in the first image).

I'll look at where the cards came from. But the vertical centering also doesn't make sense to me.

[jennifer-richards]

The vertical centering is accidental - possibly from merge conflicts or a commit error. It can be fixed by adding an align-items-start to the #righthand-nav.

The other glitches are side effects of the timezone picker behaving badly. If I drop that (and add the align-items-start):

[jennifer-richards]

Re: the card, it's not essential to the changes - I personally like the padding/borders that it creates, but I think it's an aesthetic question. It could be dropped without much impact.

[jennifer-richards]

Wrapping the timezone picker turns out to be straightforward, giving this behavior:

[larseggert]

This is much more useful, thanks! Could I as - pretty please - to remove the card (i.e., the border and extra spacing)?

[jennifer-richards]

Working on it, will post in a minute

[jennifer-richards]

No cards.

[jennifer-richards]

Also, I found the cause of the vertical alignment - we'd both taken the inline style off of the #righthand-nav and moved to CSS. I'd dropped the 70vh height in my branch, but it came back when I merged your branch in. Without it, the panel shrinks instead of padding its content.

I've added a couple more tweaks: shrinking the size of the compact timezone picker and adding a max-height of 80vh to the entire righthand panel. At very small browser heights, this largely avoids the right hand panel from falling off the bottom of the viewport.

Reasonable browser height:

Browser too short but everything is still nominally usable

We could perhaps hide the time zone selector in this mode, but this isn't really an issue until the nav panel is already overflowing into a scroll bar. Regardless, usability is minimal, so I'm inclined to keep it simple.

[larseggert]

LGTM!