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

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 , 60 px )* 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_pag