Tag synonyms suggestion textbox is overlapped by Suggest button

bug picture

Example link on Stack Overflow (requires 2500+ reputation), also reproduced the same on Stack Overflow in Russian. I don't have other site accounts where I have 2500+ reputation to be sure that it affects other communities than Stack Overflow plus localized versions.

All major browsers on Windows have this issue: Chrome, Firefox, Edge, IE.

  • 1
    Yes, in SOes happens too – lois6b May 17 '18 at 8:14
  • @Glorfindel Does this happen in other than Stack Overflow communities? You have at least 6 accounts with 2500+ rep on non-StackOverflow sites. – Vadim Ovchinnikov May 17 '18 at 8:21
  • 1
    Just checked and it happens here (on Meta Stack Exchange) as well. In my browser (Firefox on macOS) it's less visible because the height of the Suggest button and the input field are equal. On the regular Stack Overflow, it doesn't happen (for me) but it has a new responsive design. – Glorfindel May 17 '18 at 8:22

CSS box models strike again!

The label, entryfield and button are arranged using a flex layout, with a width of 100% specified for the entryfield. Unfortunately, that width is specified under the assumption that borders and padding would be included - which by default they are not... So the actual width of the entryfield ended up being 100% + another 12 or so pixels... Overflowing into the button.

Adding a class that forces border-box sizing corrected this.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .