I’ve been playing around with the HTML dialog element and discovered a mysterious gap issue while using it in a side panel. After much troubleshooting with Claude, ChatGPT, and Gemini 2.0 Flash, Natalie finally helped solve the problem originating from the default browser styles in Firefox DevTools. By switching to Chrome DevTools, I found the culprit – a hidden max-height rule, and adding max-height: none to my CSS fixed it. Further exploration led me to the HTML specification on GitHub, revealing a commit history detailing the max-height rule’s evolution. Overall, a unique journey through CSS bug fixing and specification research that even taught me about default user styles and the fascinating backstory behind them.
https://til.simonwillison.net/css/dialog-full-height