Greasy Fork

It looks like something has changed on AO3’s styles recently, so that now the buttons are all right-aligned above the comment boxes instead of left-aligned like they used to be. It’s a bit annoying on desktop, but it’s a real pain in the Sticky Comment Box on mobile, because they’re half off-screen while I’m typing.

It looks like the buttons above the comment boxes are getting caught by this set of rules

@media screen {
    .comment .actions {
        float: none;
        text-align: right;
    }
}

from https://archiveofourown.org/stylesheets/skins/skin_1_default/1_site_screen_.css line 2886, according to the Web Inspector on desktop. Looks like the float:none; in that selector is overriding your ul.comment-format’s float:left;.

Oddly, I don’t see it the problem in the Sticky Comment Box on desktop, just on mobile (while for AO3’s own comment boxes, I see the problem in both desktop and mobile), so there must be an additional weird specificity or cascade order issue, too, so I’m not sure what the best method of fixing it might be…

Er, now that I’m looking at mobile again, I’m not seeing it with Sticky Comment Box, just the regular comment boxes (where some of the buttons do appear offscreen when typing due to the OS’s zoom-while-typing-in-text-fields UX and AO3’s css change), so maybe I was too tired to tell the difference when I first noticed :oops:

thanks for the heads-up :) yeah, looks like something changed on the Default skin that overrode the script's CSS (I could look up why, but I'm too lazy lol)

I just updated the script, they should be left-aligned again on desktop and mobile.

Thanks!