Olivero pager wraps more and more as active page number is higher if there is a sidebar

I can't reproduce this with out of the box Drupal. When I look at your site, I do see the issue, but the markup is changed a bit (not sure what's doing it). There's also a sidebar block that's displaying empty markup. That might be related.

Not sure how to troubleshoot this, because I can't reproduce. Ping me in slack and we can figure out time to troubleshoot.

The only block I have in the sidebar is the book navigation block. Eg. https://www.hojtsy.hu/blog/2013-jul-17/drupal-8-multilingual-tidbits-8-t... shows that in action. Its not very well styled, but that is another question :)

Seems like on pages like the front page where there is no book navigation this still produces some whitespace which makes Olivero think there is a sidebar. I think that in itself is a bug. (But this also means that if there is a sidebar, the pager will not be styled properly?)

I think that in itself is a bug.

Yeah, I agree with that. If you disable that block, does it fix the pager issue?

The pager is good when I disable the sidebar block. So I think there are two bugs:

(1) the pager wraps when there is a sidebar block
(2) there looks like whitespace produced from block templates that the main page template thinks is sidebar content

It seems like the Olivero book navigation template override attaches the olivero book library (hah, get it? book library!) even if there is no book tree to display. That may result in some whitespace left around from there? I don't have enough experience to know how whitespace is handled in templates.

I can confirm this issue when placing any block in the side-bar region the pager wrapped up in the next line.

Gauravvvv → made their first commit to this issue’s fork.

Tested the MR 6591 and it worked fine the pager did not wrap into the next line even if there is a sidebar.

Attached Before/After screenshots

Thanks

How does this look with a tall sidebar? I am not well versed enough in CSS flex to tell sorry :)

The current patch needs a different approach. The pager needs to wrap if 1) narrow viewport or 2) user zooms in where the items would otherwise be off the screen. In addition, @Gábor Hojtsy is right that the pager needs to accommodate a sidebar that can potentially have more content than the main region.

@Gábor Hojtsy refers to two issues

(1) the pager wraps when there is a sidebar block
(2) there looks like whitespace produced from block templates that the main page template thinks is sidebar content

However, I'm not sure if we can resolve the first issue because the pager does not know how much content is in the sidebar region. If it overflows, it has to wrap. If the pager were in its own block, we could move it to a different full-width region, but that's not the case.

The main issue here is that we need to make sure that the region markup does not output when content is not present.

Also Happy Valentines Day everyone! ♥️

Some out of the box ideas is if the pager can hide some items towards the end if it would be too wide? Or it can be more tight (less click/touch space) if the space is not enough due to sidebar? The region output IMHO would be its own issue, should I open that one as well?

Opened 🐛 Olivero sidebar region produces whitespace output that the page template considers is an existing sidebar Needs work for sidebar.

I'm pretty sure the root of the region output issue appears to be 🌱 [meta] Themes improperly check renderable arrays when determining visibility Needs work , although there are likely ways to work around this.

I'm still not able to reproduce the wrapping issue though. I even set up book, and got the extra element in there, but no wrapping happened.

Try generating more nodes and check maybe it could be the reason why you are not replicating the wrapping issue.