9

Today I have noticed the "Select your next badge" modal window has become tiny, cramped, and hard to read due to smaller font-size. I am not sure when this changed (I do utilize custom user styles to modify most of the site already to make it more usable), but it seems quite different from how it was even earlier this week.

Can this please be reverted? There is really no need to make the font so small or require so much scrolling. If this was a case of trying to optimize this modal for mobile devices, then please make use of media queries here for those of us with wider screens (certainly the vast majority of users).

Newly tiny modal; small font; feels cramped; have to scroll

Previously, it took up a better amount of space in order to avoid needing to scroll (or needing to squint to read the tag descriptions):

Proper-sized modal; room for plenty of badge cards without needing to scroll; font is more readable

For others equally afflicted, I used these styles to fix it in the short term:

#js-select-badge-contents > div {
    max-width: 900px;
    max-height: 620px !important;
}
#js-select-badge-contents div div div.js-badge-list-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
#js-select-badge-contents div div div.js-badge-list-container button {
    height: 150px;
}
#js-select-badge-contents div div div.js-badge-list-container button > span {
    font-size: 12px !important;
}
2
  • 5
    It is not optimised for mobile devices either: i.stack.imgur.com/api24.jpg Mar 25, 2022 at 15:06
  • 2
    @NickstandswithUkraine Oh I see, so desktop users go from 4 columns to 2 and mobile users go from 4 to 1 :-(
    – TylerH
    Mar 25, 2022 at 19:17

0

You must log in to answer this question.

Browse other questions tagged .