[beta] new UI can be too narrow

[aspiers]

Issue Description

Just like with GitHub, enforcing a maximum width on the main content of each page in the layout can cause things to be too squashed and waste a lot of valuable screen space.

How to Reproduce

1. Join the beta program
2. Go to https://build.opensuse.org/package/show/systemsmanagement:sumaform:opensuse423/cloud-init
3. See something like this:

4. Notice how certain lines are needlessly wrapped, and how much wasted space there is.

Expected Result

Tweaking the width gives a much nicer result:

However, everyone's tastes / browsers / displays are different, so this should be adjustable.

[dmarcoux]

Thank you @aspiers for the feedback. We definitely need to use the space when available.

I'm not sure though about the adjustable width. However, let's say that we want to move forward with this proposal. How would you want to set this? On the user profile page?

[aspiers]

Ideally it would be settable by dragging the (perhaps invisible) border with the mouse, just like resizing normally happens. Divorcing the setting from the view which it affects will reduce usability IMHO. The way Chrome's inspector handles boundaries is a good example to follow.

[aspiers]

Also, I guess the setting should be stored in a cookie, so that it is per browser/machine. It wouldn't make sense to have the same setting for a user's laptop and workstation, so per-account doesn't make sense.

[hellcp]

I would say that adding one more breakpoint to preset set by bootstrap would be enough (not to break breakpoints set for smaller devices). Currently, default bootstrap breakpoints that are used in OBS are

.container {
 width:100%;
 padding-right:15px;
 padding-left:15px;
 margin-right:auto;
 margin-left:auto
}
@media (min-width: 576px) {
 .container {
  max-width:540px
 }
}
@media (min-width: 768px) {
 .container {
  max-width:720px
 }
}
@media (min-width: 992px) {
 .container {
  max-width:960px
 }
}
@media (min-width: 1200px) {
 .container {
  max-width:1140px
 }
}

adding

@media (min-width: 1600px) {
 .container {
  max-width:1540px
 }
}

would solve the issue for at least 1080p displays at 100% viewpoint width.

[Conan-Kudo]

I would personally like to see fluid width support as a toggle in the new OBS UI. The amount of wasted space in the UI has always bothered me, and it'd be good if it's possible for it to "flex" if the user asks for it.

[hellcp]

Current .card based layout wouldn't work well with fluid container, that will require bigger re 🤔