A dialog can only sit centered at a capped width, which is a poor fit for long forms and multi-step tasks, especially on small screens. Add a data-fullscreen attribute, bindable to an expression so the same dialog can change modes at runtime, and an x-h-dialog-content slot that marks the body as the only scrolling part so the header and the footer stay in place. The padding moves off the dialog surface onto the header, the content and the footer, which puts it inside the scrolling area so a focused control no longer has its focus ring clipped, and makes full width content a matter of the x-h-dialog-content.flush modifier instead of cancelling the surface padding with p-0!.
A dialog can only sit centered at a capped width, which is a poor fit for long forms and multi-step tasks, especially on small screens. Add a
data-fullscreenattribute, bindable to an expression so the same dialog can change modes at runtime, and anx-h-dialog-contentslot that marks the body as the only scrolling part so the header and the footer stay in place. The padding moves off the dialog surface onto the header, the content and the footer, which puts it inside the scrolling area so a focused control no longer has its focus ring clipped, and makes full width content a matter of thex-h-dialog-content.flushmodifier instead of cancelling the surface padding withp-0!.