Some feedback on new CSS border radius and padding

[j127]

I just updated Discourse to the latest version and there are some issues with new CSS border rounding, especially on sites with dark headers.

Here’s a screenshot from a dark header where the pieces don’t fit together cleanly any more:

Here it is on this forum with a red CSS border added to make it clearer:

Here’s what it looks like on a forum that wasn’t updated yet — I think this looks much better with less rounding and with the old padding (and no rounding where a corner touches a straight line).

I think the less rounded borders looked better overall. Here’s another example:

Here’s the old version for comparison (looks better in my opinion, though the outer corners might look better with a 2px radius):

Just some suggestions.

[sam (Sam Saffron)]

Thanks for raising this, alerted the design team.

[jordan-vidrine]

Some of this has been updated since your post.

We’ve added a bit of separation to the sidebar items:

Our notification panel has had its padding removed. This is a direction our design team feels is better than having padding around all of the elements.

This corner should not have rounding applied to it. Will address, thanks for reporting.

[j127]

This is just some feedback, because it should be easy enough for me to change it on my own forums:

The lack of padding there is fine. It might just be me, but every time I click the menu, my brain says, “something doesn’t look right.” I think it’s more the border radius than the padding, because it looks like the box surrounding the user icon has a 4px radius, but the menu has 2 * 4px radius. The buttons in the sidebar are also 4px. I think it would look better if the borders of the menu are 4px so that it’s aligned with the rest of the page.

(Your screenshots looks like everything might be 8px, but I think it looks too rounded. Unless I’m mistaken, when I log out I see 8px radius but when I’m logged in I see 4px. I’ve tried in a few browsers.)

---

Edit: we might be seeing different things. It isn’t a big problem, because I can override the variable, but it’s that top left corner that looks off to me whenever I click it on my sites. Maybe the bigger rounding puts the edge too close to the text, which is why I mentioned the padding in my previous comment.