The "x" close-mark overlaps on the title of next-privilege milestone in the pop-up message box.
Here is how it looks:
Upon doing "inspect element", I found out that the CSS padding-right property was causing this issue. Here is the current CSS code:
.message.message-config .message-close {
padding: 2px 6px 3px 6px;
.
.
}
So, I changed the padding-right property value from 6px to 2px
padding: 2px 2px 3px 6px;
and voila! Here it how looks now:
I know it's a very minor styling bug but fixing it does makes UI look better and clean. Also, in the above example, I used 2px value for the padding-right property as an example purpose but it might have other drawing implications somewhere else. I didn't experiment much. I would leave this to SE's UI/UX team for further experiment. On the side note, I have also put another feature request for Changing the next-previlege milestone name and pop-up box title and if that gets approved this will solve automatically (Please read PythonMaster's answer below for additional points).
Tech-specs: (just in case needed)
- Google Chrome Version 43.0.2357.134 (64-bit)
- DELL U2312HM Display - 23-inch (1920 x 1080) - Intel Iris 1536 MB graphics (same result on 13" MacBook Pro retina screen)
- MacBook Pro (Retina, 13-inch, Late2013) - OS X Yosemite version 10.10.2
- Zoom-level - Standard at 100%