Wrench is misplaced for wide screens

Hi everyone,

Don’t you think that the placing of the wrench menu for topics here is a little bit misplaced? It should be somewhere next to the topic header/name otherwise you might not know it’s existence unless you really were looking for it.

Using a FHD wide screen here, attached an image below to show it.

1 Like

I think a better question to ask is why the main UI (the topic threads) don’t expand for wide screens. Seems like a whole lot of white space that could be better used. Even when there are links in the right gutter, there is still a huge amount of empty space on both sides.

1 Like

That could be another way to look at it. Yeah, i agree with you. I think the topics width shouldn’t take full screen width for readability. But could be used for other things like suggested threads or whatsoever.

This was already discussed at length here:

https://meta.discourse.org/t/the-right-gutter-other-uses-and-mental-tricks/23332

I want to point something else out about your screenshot

Thus there are two ways / places to trigger topic wrench. Choose whichever one you prefer.

Now that’s interesting… The thing is that you won’t be able to see yours unless you scroll to the bottom of the thread, which is not a good UX IMHO.

The one i pointed to is a little bit thrown away, so i think if we replace it somewhere near the topic header/edit topic name would be better.

It’s not expected behavior to have a super-widescreen browser. Here’s my browser maximized across all three of my monitors.

Of course I never run browsers this way – why would I? At any rate, you can use a CSS customization in Admin, Customize, CSS/HTML if you wish to move the wrench.

Also just press end to get to the end of a topic immediately. If you want to enter at the last post from the topic list, click/tap on the last post date.

I think there might be some misunderstanding here. My screen is wide, but not super wide. It’s a regular 16:9 monitor.

This is not a ux suggestion that might break Discourse or churn users away, but would make the experience better.

I know where the wrench is now, might do some CSS work to improve the experience for myself. Thanks for your tip though.

I’m just curious, do you always have your browser view-port maximized for every site you visit?

I know that during development I push things to beyond what I think is sane (super small, super large, super zoomed, w/o JavaScript, w/o CSS, w/o images etc.) just to test

One thing that often comes up at SitePoint is that a designer thinking web === print wants to find a way to force site visitors to have their view-port at max so they will get the full beauty of the design as the designer envisions it.

A common reply is “no one using a large screen has their view-port maximized”. But maybe this isn’t so true?

Let us know how you go, keep in mind this is an admin/mod function only. We always carry slightly lower priority then general public features to these kind of UX features.

Offtopic: Yeah, my browser is in maximized state most of the time (2550x1440), unless I work with multiple apps at the same time.

1 Like

This works to keep the admin wrench and popup menu within the main content area. This will only work for left-to-right layouts. It will not move popup widow if it is visible while the browser window is being resized.

@media (min-width: 1100px) { // at 1100px content is contrained to .wrap div
    html:not(.rtl) .show-topic-admin {
        left: 50%; // center wrench
        -webkit-transform: translateX(513px); // move to edge of .wrap div ((1100 / 2) - btn_width)
        transform: translateX(513px);
    }
}
3 Likes

I say we do a PR for this @codinghorror nothing really to lose

@eviltrout will move the wrench to align with the new right gutter buttons tomorrow, solving this issue.

Warning @eviltrout we still need a way to topic wrench on mobile and when the browser is very narrow. Maybe move it into the old progress bar somehow?