[bug] <rh-dialog> nested in <rh-tabs> is not displaying the full height of the page

[brianferry]

Describe the bug

This appears to maybe be a Safari specific issue.

Codepen Example

The short version is that we have a page that needs to use tabs to display a list of items and in that list they can click on a button to get more details.

Using rh-dialog inside of the rh-tabs component appears to cause a visual bug though as the overlay and the modal do not take up the full width / height of the screen and instead are contained inside of the size of the rh-tabs component.

A native dialog element works, as shown in this codepen.

The dialog element outside of the rh-tabs component works.

Screenshots

Steps to reproduce

1. Go to https://codepen.io/OhHeyBrian/pen/pvzbxwK in Safari
2. Click on the "Open" button

Expected behaviour

The dialog element should display with the full height / width of the screen. It should operate outside of the bounds of the rh-tabs component.

Element HTML

<rh-tabs>
  <rh-tab id="users" slot="tab">Button Click Event</rh-tab>
  <rh-tab-panel><rh-button id="first-modal-trigger">Open</rh-button>
<rh-dialog trigger="first-modal-trigger">
  <h2 slot="header">Modal dialog with a header</h2>
  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>
  <rh-cta>
    <a href="#bar">Learn more</a>
  </rh-cta>
</rh-dialog></rh-tab-panel>
</rh-tabs>

Operating System (OS)

macOS

Browser

Safari

Additional browser or assistive technology info

• Safari Version 18.1.1 (20619.2.8.11.12)

[adamjohnson]

FYI work is happening to implement a native HTML <dialog> element into <rh-dialog> in #2078.