Too much wasted space on desktop

Continuing the discussion from New forum - big change for the worse:

I am not sure we mean the same thing, but here I agree - default layout has some fixed (max?) width and everything beyond is wasted. Consider:


All the marked space is wasted.

Is there any way to increase default width or even better to make it auto-adjust to current window? There was similar discussion How to increase width of topic but I am not sure of the outcome. In any case it probably global setting. May be some alternative theme?

3 Likes

I agree, it is very ugly this new site

1 Like

I agree also. I have already mentioned this in the test period, but did not get an answer. It is particular annoying when you have long CODE lines (like zypper lr -d). You widen the window and do get white space and wrapped lines :frowning:

1 Like

Yes… It would be far better if the width was able to vary dynamically with the available browser window width.

I’d dearly like to also be able to disable the timeline display on the right, IMHO it’s a further waste of space.

Yes, indeed there is too much wasted space on the left and right.

Playing with the screen width, I see going smaller around 930 pixels the timeline is removed and around 785 pixels the message area is shrinked but that message area is never expanded.

In the linked topic I see that the default seems to be:

  .topic-body {
        width: 830px;
    }

As shrinking is working fine, can’t this setting not be set to a larger value?

I would also like to see the font size for “preformatted text” smaller.

I put screenshots about this in Bug 1206491 – forum space utilization is grossly deficient since forum software migration yesterday, and today created a local workaround for the forum’s CSS insanity in my user CSS, after spending too long not figuring out how to query for prior complaints about this on upstream’s forum:

.topic-body{
  min-width: 85%;
}

.wrap {
	max-width: 100vw !important;
	min-width: 92vw !important;
}

.topic-body {
	min-width: 76vw !important;
}

#reply-control.hide-preview {
	min-width: 88vw !important;
}

#reply-control.open {
	height: 30rem !important;
}

.topic-list-main-link a.title,
.topic-list .main-link a.title,
.latest-topic-list-item .main-link a.title {
	padding: .3rem 0 !important;
}

.topic-list-main-link,
.topic-list .main-link,
.latest-topic-list-item .main-link {
	font-size: 1.1rem !important;
}

.discourse-tag.simple,
table th,
.topic-list .topic-excerpt,
.topic-list td {
	color: #111 !important;
}


.discourse-tag.simple {font-size: .9rem !important}

}
#reply-control {
	max-width: 100% !important;
}

There’s more left to do, but at least it’s become functional.

You could have explained how to do it if you actually wanted to help others.

1 Like

Howto depends on what browser is used. The web has instructions how to apply user CSS to the various browsers available to Linux users. Some may refer to user stylesheets rather than user CSS, but it’s CSS, in conjunction in many cases with scripts, that determines what any site looks like.

BTW, the forum home page uses 438,099 bytes of CSS in 12 CSS files that contained the rules I needed to counteract, along with the 199,649 bytes of HTML for it to act upon. Modern web site styling is completely insane.

.topic-body{
  min-width: 85%;
}

should have been omitted before I submitted, and editing at this point is disallowed. It was preliminary, and reformed as the 2nd rule following in vw instead of %.

In your bug report you demand exact step by step instructions how to submit bugs for discourse or participate in discourse discussions. But when you are asked to provide at least some description you reply “go to the web”. Oh, well …

Applying user CSS is a procedure that is browser-specific, if it exists at all. For some, there exist extensions or plugins for the purpose. I did the hard part, coming up with the styles to be appled.

FWIW. Applying a css in Firefox:

First goto about:config and search for ’ toolkit.legacyUserProfileCustomizations.stylesheets’ and set it to true

In your profile goto to the chrome folder, in there you should put a file called userContent.css. It might be already there for some. If it is not there you can always create that folder and file.
The userContent.css file is important to change the look of webpages, if you want to change the looks of firefox the userChrome.css must be changed.
The first line of the userContent.css file has to list the webpage you want to change. In our case:

@-moz-document domain("https://forums.opensuse.org/") {

Then you can place the rest of mrmazda work underneath (without the lines he mentioned). Save the file and restart firefox.

If you change a lot of different webpages the userContent.css can become very cluttered in no time. So it might be better to place a new xxx.css file in a separate folder and import into the userContent.css. E.g. I have a folder called CSS (it is a subfolder in the chrome folder)that contains all css files and import them with

@import "./CSS/forumopensuse.css";

Kudos to mrmazda for the code, it works well in firefox and I hope it is ok for others to use it.

Edit: For German users, a good place to learn about css is camp-firefox.de

Way too much whitespace everywhere! Ergonomically terrible, very little information on a big surface.
Why must desktop users use an interface for mobile devices??
What a waste… But I get it, it’s “modern” and everybody uses it…

Why don’t you use something sane like: EEVblog Electronics Community Forum - Index

1 Like

I tried the tip from @karlmistelberger in the New forum - big change for the worse topic and after installing Stylus it was a piece of cake to get the width completely used:

  • Navigate to a page on this forum
  • Press the newly added S button
  • Hover with your mouse to forums.opensuse.org in the newly popped-up window and click on it
  • In the Add Style window that will pop up, paste the code shared by @karlmistelberger
  • Done

Still I think it would be a good idea to change the defaults used for this forum so everyone benefits.

That’s wrong. That’s the line that needs to start either a .css file to be imported into userContent.css, or a section of userContent.css which is to be limited to that domain.

After the initial “{”, a matching “}” must follow somewhere. They must always be used in pairs. So, after you paste in the provided rules or add your own, a “}” is needed before EOF, else the whole file will be ignored.

Unless Mozilla has changed Firefox behavior since I last did this there, there is no need for .css files that userContent.css will import to be placed in a subdirectory. They simply need unique names (and end with .css?). Everything in the chrome directory is treated read-only by Firefox. I think you could put the to be imported files in a common directory for all your profiles to use, something I only just thought of, and have yet to try.

Indeed. The only two reasons for replacing old forum that I saw were “vBulletin is closed source” and “version we use is no more maintained”. Well, Simple Machines Forum - Free & open source community software is apparently open source, is maintained (at least, the latest release was less than a month ago) and layout is very close to vBulletin minimizing impact for existing users.

But guess what - it has exactly the same issue with wasted space :slight_smile: Except it is not white by default …

The content has fixed size and does not expand when you expand the window.

I did some more whitespace culling, reducing by about an inch the distance from the top of the viewport, to the top of the text in the first (pinned) install-boot-login topic by about 25mm on my 24" 1920x1200 screen: Normal here. Trimmed here. These are the CSS rules employed:

#main-outlet {
	padding-top: 0.2rem !important;
}
.select-kit .select-kit-header {
	font-size: var(--font-0);
	padding: .2rem .65em !important;
	overflow: visible !important;
}
#main-outlet .list-controls {
	padding-top: none !important;
	padding-bottom: none !important;
	margin-top: none !important;
	margin-bottom: 0.6rem !important;
	height: 1.4rem !important;
}
.topic-list .topic-list-data {
	padding: .3rem .2rem .1rem !important;
	line-height: 1.35rem !important;
}

The net result is seeing at least one full additional topic before needing to scroll down to see another.

Some small other differences can be seen, because the shots came from two different browser profiles with slightly different font and UI settings, but the general idea is apparent.

P.S. - Isn’t it past time to expire that “snapshot 20210527…” pinning?

Discourse will automatically unpin read articles.

Actually I use by default the narrow fixed width style with opensuse.org being unchecked in “Firefox > Stylus”. Whenever full width is needed I check opensuse.org. Switch is fast and easy. I see no need for further tinkering. However adding this feature to current discourse installation would help to end the discussions related to width.

1 Like