How I Found a CSS Bug on Etsy's Engineering Blog

#css #frontend #ui #webdev

As a backend dev, I was browsing Etsy's Code as Craft blog and noticed the category dropdown was cutting off the last option. Everything displayed as expected except the CodeMosaic option, which appeared below the dropdown border.

I opened DevTools to inspect the element. The HTML was fine, CodeMosaic was inside the same parent <div> as everything else. But the inspect element highlight showed it was rendering outside the container's boundaries.

Next, I checked the computed styles on the dropdown container (.wt-menu__body). It has a rendered height of 478px. The shared stylesheet (settings-overlay.css) sets overflow: hidden and a max-height:

max-height: calc(var(--clg-dimension-pal-size-1000,60px)*8);

60px × 8 = 480px. Each menu item is 51.2px tall, so 10 items require 512px, which is more than the container allows. Bumping the multiplier to 9 (60 × 9 = 540px) is enough to fit all 10.

Normally, overflow: hidden would clip the extra items. But the blog page's own stylesheet (blog_home_page.css) has a more specific selector, .cac-header .wt-menu div.wt-menu__body, that sets overflow back to visible. So CodeMosaic renders below the dropdown border instead of being hidden.

Changed the max-height in DevTools, and CodeMosaic snapped into place. A fix would be to increase the multiplier. A more durable fix would be either removing the max-height constraint so the dropdown sizes to its content, or fixing the specificity override in blog_home_page.css so the container can use overflow-y: auto and scroll when it needs to.

Update 02/26: Just checked and Etsy has since fixed this issue :)