In the words of the great and wise doge…
The community's concern for the seemingly smallest details speaks to the concern you have for Stack Overflow and the Stack Exchange network. When I first saw this post, I took a quick peek into this anomaly. Could I simply add display: flex;
to the overall wrapper and be done with it? Well yes, that would work…mostly.
Yet as I explored this area further I discovered a number of other issues as well. And given that I was in-between projects and needed something I could work on but drop rather quickly if need be, this was a perfect little project.
After looking at the highlight boxes a bit further, here are the issues I found (beyond mis-aligned borders):
- Use of CSS sprites. We've been actively moving away from CSS sprites in favor of inline SVG icons. There are a number of icons within this area which have been converted to SVGs.
- One-off icons in use. And while we're updating icons to inline SVGs, we should use icons that are used in other areas of Stack Overflow.
- Incorrect colors, font-sizes, line-heights, and spacing. A whole bunch of inconsistency here. The Stack Overflow Design team has been (slowly) standardizing these items and we update the design accordingly.
- Poor color contrast with the badge progress bar. We're updating the badge and privilege progress bars so that the copy is easier to read and you can see the badge dot / icon better now.
- Older progress bar styles. Again, since we're in here in, let's also update the progress bars to a newer, updated look.
- A heavy mixture of layout and style coding within the CSS. Two years ago we didn't have robust grid system in place 😱 and flexbox hadn't been fully implemented yet across all modern browsers 😭. But oh happy day, flexbox is now a thing 👍 and we have a grid system 🙌 . All the old highly specific layout CSS we can now tear out. Gone are the floats, magical fixed widths, and confusing absolutely positioned items in favor of a flexbox grid system.
- The popup badge/tag selector search box was always breaking. Over the years we've fixed the search input within the badge/tag selector popup multiple times for various communities. It just fit, so when a community's input style had slightly more padding or a larger font-size, it all fell apart. Now with the power of flexbox 💪 , this can be fixed forever… thankfully 🙌 .
As you can see, these mis-aligned borders hint at deeper, larger issues. And while this may seem like a small matter, it's actually something we do care very much about here at Stack. Not only do we want Stack Overflow to be the best product out there, but we also want clean, re-usable, well-commented code. This allows the various developers and designers that work here to understand why things are the way they are and can properly address or improve things without breaking things or re-inventing the same thing elsewhere.
Here are some obligatory screenshots to compare and contrast the old and the new highlight boxes…
Before Highlight Boxes
After Highlight Boxes
So there you go. Misaligned borders are now gone and so are a lot of other little oddities. This has now been pushed to production. If you see any issues, please let us know using the bug design profile-page combo.
6.8px
. So for a fix, use Firefox.