Panel with variant="outlined" Restricts Nested Dialogs to Panel Size

[aneuhold]

Describe the bug

First off, AMAZING FRAMEWORK. Probably the best Material framework used so far, with experience using multiple in React, one for Angular, one for Vue, and a different one in Svelte, this is the best.

Using an Accordion then Panel with variant="outlined", then putting a Dialog within that, will block the Dialog from using the full page, it will stay within the confines of the Panel.

It took a bit to find the solution, but this can be fixed by putting the following into the global CSS:

.smui-accordion .smui-accordion__panel {
  will-change: auto;
}

Now, there's probably a much better way to address this inside this repository, but this CSS looks like it fixed it, and other users could use this fix for now as well. ❤️

To Reproduce

Steps to reproduce the behavior:

1. Create a component that uses an Accordion with a Dialog in it. For example:

<script>
  import Accordion, { Content, Header, Panel } from '@smui-extra/accordion';
  import Button, { Label } from '@smui/button';
  import Dialog, { Actions, Content as DialogContent, Title } from '@smui/dialog';

  let dialogOpen = false;
</script>

<Accordion>
  <Panel variant="outlined" color="secondary">
    <Header>Some Header</Header>
    <Content>
      <Button
        on:click={() => {
          dialogOpen = true;
        }}>Open Dialog</Button
      >
      <Dialog bind:open={dialogOpen}>
        <Title>A Title</Title>
        <DialogContent>Some content here.</DialogContent>
        <Actions>
          <Button
            on:click={() => {
              dialogOpen = false;
            }}
          >
            <Label>Done</Label>
          </Button>
        </Actions>
      </Dialog>
    </Content>
  </Panel>
</Accordion>

2. Click on the header to expand the Dialog, then click Open Dialog
3. See issue

Expected behavior The panel allows Dialogs to open within the context of the full page when the Panel is used with variant="outlined".

Screenshots

This is what it looks like as is and using the code above without the CSS fix:

With the CSS fix it works like expected:

Desktop:

• OS: Mac OSX Sonoma 14.2.1
• Browser: Chrome
• Version: 120

Additional context

Any additional info can happily be provided!!