Topic Screen Real Estate on large monitors

Sorry about the negative title - it’s the marketer in me fishing for eye balls. I have a gift for you. :slight_smile:

I noticed that the topic content area on large screens is pretty dismal.

On my 1920x1080 pixel screen, the actual topic text area is only 50% of the screen. What a waste!

So I added these css rules to my theme:

Topic page make full width on big screens

@media only screen and (min-width: 1500px) {
.topic-body {
    width: 95%;
}
.timeline-container {
    margin-left:0px;
    right: 45px;
}
.popup-menu {
    left:unset !important;
    right:0px;
    }
}
@media only screen and (min-width: 1900px) {
.topic-body {
    width: 95%;
}
.timeline-container {
    margin-left:0px;
    right: 125px;
}
.popup-menu .topic-admin-popup-menu {
    left:unset !important;
    right:0px;
    }
}

It moves the timeline bar outside the main content area and then expands the content to fill that new empty space. My theme is heavily customized so I’m not able to provide a before and after screen shot right now… Anyone want to give this a try and post screenshots of the difference? It looks way nicer I think.

Discourse devs… how about adding this into core? :wink:

1 Like

Why not share screenshots before and after to support the point you’re making?

Creating a copy of the light theme to customise is very straightforward.

1 Like

Unlikely to happen in Discourse core see:

https://baymard.com/blog/line-length-readability

There are quite a few topics about this already.

9 Likes

Yes this is duplicated many times over. Try searching for existing discussions.

1 Like