Add toggle to display Lemmy-UI in fullwidth mode

[Klobenda]

For backend issues, use lemmy

Is your proposal related to a problem?

See this user post

I’d just like Lemmy to take up the full width of the screen. I hate this design trend of wasting 50% of your screen real estate. Old Reddit scales horizontally pretty well, especially with a plugin to hide the sidebar which makes it work well on portrait and landscape on mobile. Lemmy is cluttered because of how narrow it is. I messed around with the developer console and made it full width and it looked a lot more usable, but unfortunately those changes aren’t permanent and I don’t know how to make a user style or browser plugin to do this change myself.

And I'd have to agree with this user that the option would be nice

Describe the solution you'd like

An option is available to view lemmy in fullwidth. In the front-end template, changing all container-lg to container-fluid does the trick, but I know there's more to adding a toggle than just changing that class.

Describe alternatives you've considered

Users can override it per-instance by adding this userstyle:

.container-lg {
    max-width: unset !important;
}

Additional context

(Write your answer here.)

[snvoid]

Please add this!

[dessalines]

lemmy-ui doesn't have settings of its own, but I'd be willing to merge something that looks better on larger screens, as long as there's no custom css.

Check the containers here: https://getbootstrap.com/docs/4.6/layout/overview/#containers

[Klobenda]

lemmy-ui doesn't have settings of its own, but I'd be willing to merge something that looks better on larger screens, as long as there's no custom css.

Check the containers here: https://getbootstrap.com/docs/4.6/layout/overview/#containers

The only solutions I can think of are

• registering your own breakpoint within BS4 (xxl, >= 1700px maybe?) so that you can have a container-xxl class that remains fluid up to a width where it becomes untenable
• add a localstorage-backed toggle switch, have that toggle's state determine if the class on the container elements should be container-fluid or container-lg, and the toggle could have d-none d-block-lg to reduce clutter when it's not applicable.

Choosing one of bootstrap's limited sizes is a non-solution, because they end at such a tiny size.

In a perfect world, being able to select between "standard" (current behavior, container-lg), "wide" (the xxl breakpoint option), and "fullwidth" as layout options would be great, but I respect wanting to keep things simple.

Adding a breakpoint should be pretty simple as long as you build off of the SCSS version of BS4 and don't break the rules around breakpoint sizes;

[SephGER]

I think its not done with a simple width-unset. The sidebar will be quite big on larger displays.

[dullbananas]

The width could be adjustable by dragging the side edges of the main content area

[SleeplessOne1917]

Is there any reason to not just make the container fluid without a toggle? The only feedback I've seen on all of the unnecessary whitespace was negative.

[dullbananas]

Is there any reason to not just make the container fluid without a toggle?

Wide paragraphs can be exhausting to read

https://en.wikipedia.org/wiki/Line_length

[JamesLear92]

Just tested by disabled max with on "community container-lg" and it looks exactly how I'd want the site to look like. I really hope this is implemented.

[SineSwiper]

Wide paragraphs can be exhausting to read

https://en.wikipedia.org/wiki/Line_length

Under that logic, we should make our paragraphs 40-characters wide, which is just going to make the problem worse.