Form control focus ring clipped in dialogs

[andreasunger]

Describe the bug

Form controls that are placed in dialogs get their focus ring clipped.

To Reproduce

Steps to reproduce the behavior:

1. Open the dialog in the Dialog component's "Setting Initial Focus" documentation.

Screenshots

Browser / OS

• OS: Linux
• Browser: Chrome, Firefox
• Browser version: Chrome: 131, Firefox: 133

[claviska]

This is caused by the native overflow property that's now set here:

https://github.com/shoelace-style/webawesome/blob/ce40d5e997c3718d7beeeaa669c5df075193776b/src/styles/native/dialog.css#L89

In previous versions, the dialog's body appears to have padding which no longer exists, causing the overflow to get clipped.

@LeaVerou what would you suggest as the best way to solve this one?

[LeaVerou]

This is caused by the native overflow property that's now set here:

shoelace-style/webawesome@ce40d5e/src/styles/native/dialog.css#L89

In previous versions, the dialog's body appears to have padding which no longer exists, causing the overflow to get clipped.

Hmmm. It's been a while but I think the padding probably moved to facilitate applying padding directly on <wa-dialog>.
That said, it's probably not great for overflow as well to see scrollbars with padding around them.

@LeaVerou what would you suggest as the best way to solve this one?

Ideally, whatever solution we implement should also work for <dialog>.
Thinking out loud, these are the options I see…

1. We apply padding-inline directly on dialog children instead of the dialog itself. Downside: padding on <wa-dialog> will no longer work, we'll need to use a custom property.
2. We apply a padding-inline just as big as focus outlines to dialog children, and we counteract it via negative margins. padding-inline on dialog continues to work. but it's a bit overfit to this issue (e.g. what happens with other shadows, badges, etc) and a bit more flimsy.

So all in all, I'm leaning towards 1, but will mull it over a bit more in case I come up with anything better.

[claviska]

Is there a use case where folks want things to show outside of the dialog body? Perhaps a tooltip or popover?

Yes, they should use the Popover API (and will via our components as soon as we implement it) but that's still very new and I suspect third-party components/plugins won't always use it.

[LeaVerou]

That's a good point. I think it's unfortunate you have to pick between the two, but right now there is no way to do both — if we want the dialog to scroll when it has too much content, overflowing declarations are not possible (with a reasonable amount of effort/complexity at least).