Closed NoSloppy closed 1 year ago
I'm concerned that at smaller screen sizes, the buttons are going to get cut off for longer text. I would recommend something like this instead. Also probably worth giving the buttons a min-height that makes the text ones a tad taller. For some reason this layout makes them look more squished (plus that would make them more accessible).
.tabcontent { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(150px,16%), 1fr)); gap: 4px; }
You could achieve something similar with width: max(16%, 150px);
on the buttons instead. Though you wouldn't automatically fill the space, and you'd probably want a vertical margin as well.
I think in testing, there's no happy medium to have them uniform size when you need to fit "ResponsiveLightningBlockL" or "NoisySoundLevelCompat". I think just rounding the corners a bit might be fine.
Do we like this?