It's just a minor CSS issue. See the following gif:
2 Answers
This has been resolved as part of design overhaul MSE went through not long ago. Now both normal and hovered states have blue square background of the same size, as it should be.
Looks like the problem is that there class .bounty-vote-off
, which is used to style the un-awarded bounty button when you're not hovering the cursor over it, has an extra padding: 2px 4px 3px
style that doesn't match the padding: 0.2em 0.5em
style for the .bounty-award
class.
Simply removing the padding
style from .bounty-vote-off
should fix this bug.
Ps. I'm pretty sure this also affects several other SE sites besides MSE, including (at least) the recently graduated Academia.SE and graphicdesign.SE.
Actually, the real cause of this bug seems to be that the bounty icon styling on this site (and on Academia / Graphic Design / etc.) is a Frankenstein hybrid of two entirely different styles:
SOFU style (SO):
Beta style (crypto.SE):
Frankenstein style (meta.SE):
Frankly, I suspect that whoever designed these stylesheets simply started from the beta styles and tweaked them to look more like SO, but forgot to modify or test the unawarded bounty appearance.
Ps. Looks like the CSS fix included in the Stack Overflow Unofficial Patch user script for this related design issue also fixes this bug as a side effect.
byzanz-record
. I created my ownbyzanz-record
GUI wrapper, that I shared on my GitHub account. But here you will find a shell script that is very easy to use after installing the dependencies.