Styling an HTML dialog modal to take the full height of the viewport

Styling an HTML dialog modal to take the full height of the viewport I've been experimenting with the HTML dialog element recently, for example in my Prompts.js JavaScript library. Today I got Claude to build me an experiment to use it for a side panel that would slide in from the right hand side of the screen, looking like this: But what's with that gap at the bottom? I want the side panel to take up the full height of the screen. The CSS looked good to me: dialog { position : fixed; margin : 0 ; padding : 0 ; border : none; width : 80 % ; height : 100 vh ; top : 0 ; right : 0 ; left : auto; background-color : white; box-shadow : -5 px 0 15 px rgba ( 0 , 0 , 0 , 0.1 ); transform : translateX ( 100 % ); transition : transform 0.1 s cubic-bezier ( 0.2 , 0 , 0.38 , 0.9 ); } Where was that gap coming from? Firefox DevTools didn't answer my question, so I tried poking at Claude, then ChatGPT, and by the time I was screen sharing with Gemini 2.0 Flash and arguing out loud with it abo ... Read full article.