Capitalization of post action links is causing multiple rows of links

Question

Just now, all the post action links at the bottom of a post suddenly are capitalized and slightly bigger. Which in general is nice, but sometimes they're now in double rows, and inconsistently too:

On smaller screens you can even get three rows:

And if other people edit your post, the buttons move around to make room for an extra 'Rollback' button:

I can already see myself misclicking things if they're left like this. Would there be any chance of getting my ducks back into a single row? Or at least in consistent positions?

Answer 1

Thanks for all of your feedback on this change. I'm the developer who led the charge for putting this together, so let me talk through a bit of our rationale.

In the course of making improvements to the Review Queues, I ran across the code for the post menu: lots of lines of code that've hardly been touched for several years, and written in such a way that made it very confusing and difficult to make any changes to it with any semblance of confidence or ease. So, I set about refactoring it to make it easier to update in the future.

In the course of the refactor, we decided to clear up a bit of other technical/design debt while we were in there:

1. Capitalization - as per our style guide, we use sentence casing on all buttons and links. Spending time here allowed us to bring the menu up to date with the direction in which we're bringing the rest of the site's content.

2. Formatting - The formatting for post menu was ... interesting. It used invisible spans to organize and separate the menu items, among other things, and it wasn't using Stacks (our design system) at all. We "Stacksified" the menu, which we've been meaning to do for ages but hadn't been able to.

So it seems like most of the feedback here falls into two categories: that we didn't announce the change, and that the menu can fall onto two lines instead of one.

For the first, I'll take responsibility for that. I made the call that this was a small enough change that we could respond to any thoughts that came up, but that it didn't warrant an announcement. It's tough to find the correct line between announcing every single tiny small change that we make (too much!) and only announcing the very biggest of changes (not enough!). It's possible that I erred on the wrong side of that line.

For the second, we spent a lot of time trying to find the best balance between making the menu responsive, usable at small screen sizes, and trying to keep it as close to how it's been as possible. For example, we considered stacking the editor and answerer as a solution as well. An added complication is that the menu shows up totally differently for different users because of permission levels. Ultimately we determined that the solution that you see in front of you hit as many of the right notes as was possible.

I plan to keep an eye on additional feedback rolling in for this change and am happy to revisit further tweaks if it seems like they'll be necessary.

Thanks again for all of your thoughts, and I'm happy to answer any questions y'all have.

Answer 2

I preferred the lowercase links here, since they didn't split to as many lines and because they were a bit smaller. But there have been feature-requests to make them capitalized in the name of consistency. So, ideas...

1. Revert the change entirely.

OR...

2. Keep the capitalization in the name of consistency but make them a touch smaller so they won't go to multiple lines.

The second option would keep it (kinda) consistent, in line with the "Edit tags" label for 10K users. Reverting the change entirely would help prevent multiple lines of links on smaller screens, but it wouldn't be consistent with other stuff.

But there is another thing I take issue with here: How silent the change was. This looks like it was pushed out network-wide without any testing or Meta notification post, which is... not really great. Please don't do that.

Aside from that, a quick fix for this would be a userscript, so copy and stick this code into Tampermonkey (thanks @Makyen for the help!):

// ==UserScript==
// @name         SE: Lowercase Post Menu Buttons
// @namespace    https://meta.stackexchange.com/a/359488
// @version      0.2
// @description  Change the post menu buttons to lowercase.
// @author       Ollie 
// @match        *://*.askubuntu.com/*
// @match        *://*.mathoverflow.net/*
// @match        *://*.serverfault.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.superuser.com/*
// @exclude      *://api.*
// @exclude      *://blog.*
// @exclude      *://chat.*
// @exclude      *://data.*
// @exclude      *://stackoverflow.com/advertising*
// @exclude      *://stackoverflow.com/company*
// @exclude      *://stackoverflow.com/jobs*
// @exclude      *://stackoverflow.com/talent*
// @exclude      *://stackoverflow.com/teams*
// @exclude      *://*/tour
// @grant none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    document.documentElement.insertAdjacentHTML('beforeend', `
        <style>
            /*Lowercase the post menu buttons*/
            .js-post-menu .s-anchors > .flex--item > * {
                text-transform: lowercase;
            }
            /*Prevent the lowercase from affecting other things.*/
            .js-post-menu .s-anchors > .flex--item > * > * {
                text-transform: initial;
            }
        </style>`);
})();

Answer 3

status-completed

Can the capitalization of post action links be updated in the help pages too?

For example, in the cast close and reopen votes page, the "close", reopen" wordings are in the small caps, which is not matching with the current UI.