With variant="max", the title-bar close (X) button is oversized and dropped out of place on mobile / touch devices. Same code is fine on desktop, and fine with every other variant — only variant="max" is affected.
Repro
<ui-modal id="m" src="https://your-app/page" variant="max">
<ui-title-bar title="Settings"></ui-title-bar>
</ui-modal>
Open on a touch device (or Chrome DevTools device emulation → pointer: coarse) and look at the close (X), top-right.
Expected: X aligned in the title bar (as on desktop / other variants).
Actual: X enlarged and dropped below its position.
Isolation
- Desktop → fine.
- Remove
variant="max"→ fine. - Empty/trivial
srccontent → still broken ⇒ not caused by app content.
Likely cause: the close button .size-base.icon-only is only downsized inside @media (min-width: 48rem), (pointer: fine) (≈28px); when that doesn’t match (touch) it falls back to ≈44px, which variant="max" doesn’t lay out correctly. These styles are host-rendered, so apps can’t fix it via their own CSS.
