In the css file I noticed there's no styling for <dialog> tag. Without any styling I end up with the following:
When I apply the style below, I got a decent-looking dialog. I generated the style via LLM so I'm kind of reluctant to send a PR.
/* base styles for dialog */
dialog {
padding: 1rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
background: white;
color: inherit;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
max-width: 90%;
width: auto;
margin: auto;
}
/* backdrop when modal dialog is shown */
dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
}
/* optional: center dialog vertically & horizontally for non-modal usage */
dialog[open] {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
In the css file I noticed there's no styling for
<dialog>tag. Without any styling I end up with the following:When I apply the style below, I got a decent-looking dialog. I generated the style via LLM so I'm kind of reluctant to send a PR.
