New UI has lot of wasted white areas

[jonsger]

Issue Description

When using the new UI of OBS through the public beta program on build.opensuse.org I see a lot of wasted white areas. As the font size is bigger and the width smaller, text lines have many line breaks.

New UI

Old UI

I think it's clearly visible that the readability in the new UI is much worser, due to all those line breaks.

A "simple" mitigation would be to decrease the width of the free space on the left and right site of the page.

How to Reproduce

1. Go to build.opensuse.org
2. Decrease the window size of your browser to something like 940px (half width of FullHD).
3. Join the public beta program on your user home directory.
4. Compare page views with the old UI.

[dmarcoux]

Thank you @jonsger for the feedback.

I agree that this needs to be improved. We already worked on something quite similar regarding breakpoints (#6033), however the issue you report is about smaller viewports. We'll need to address it.

[hennevogel]

There is a reason those are called breakpoints. You should introduce them when your layout breaks. It does not break at 1600. Nor does it break at 768. What is mentioned is actually the point the new layout "breaks" (as in too much padding left and right) at ca. 800px width. The real fix would be to handle this.

BTW this particular break repeats after every break point + 10px we have BTW (so at 586px for SM, 778px for MD, 1002px for LG etc. etc.)

[dmarcoux]

We could use fluid containers for small viewports (so .container-fluid instead of .container). Those would take the available space instead of being limited to the limit defined by breakpoints.

[coolo]

I would love to hear how this works. I switched openqa to fluid layout due to similiar issues - and expected pushback from users on large views, but it didn't happen. Even though e.g. https://openqa.opensuse.org/tests is very spacy now.

[dmarcoux]

@coolo The width for .container is defined based on those variables and the width for .container-fluid is 100% with a bit of padding, as defined here.

I need to take more time to explore different solutions, but my idea now would be to work with media queries and extend .container with .container-fluid for small viewports. .container and .container-fluid are pretty much the same, except for the width, so I think it would work.

[Ana06]

Related to #6587

[hennevogel]

duplicate of #6587