Modals when the svelte part of a website isn't full-width

[mrme44]

When adding a modal, the modal is created within a position fixed element with a width of 100vw. This can make the modal run off the screen if there are any parent elements with position: relative that are not full-width, or any transform animations on a parent element that are not full-width.

One solution can be to make sure modal components are always placed at a top level in the DOM. That would work, except, Svelte can be embedded within a larger application. This is the problem I'm running into. There are 2 better solutions that would work:

Solution 1) Change the presentation element created by the modal to have a width and height of 100% instead 100vw/100vh. I can't think of any major backwards compatibility issues that would be created by doing this since right now the only way the component can be used as intended is when 100vw is the same as 100%.

Solution 2) Inject the modal element into either the body element or the root element of the svelte application. This can be done with the technique shown in this example.

Solution 1 would make the modal only show up over part of the screen, instead of full-width, when used in sub-components. Solution 2 would make sure the modal is always shown full-width. This is probably the better option.

[mrme44]

I have addressed this problem in my project by wrapping the modal component with the following component and using this instead:

<script>
import {onMount} from 'svelte';
import { Modal } from "carbon-components-svelte";
let modal;
onMount(()=>{
    document.body.appendChild(modal)
})
</script>

<div bind:this={modal}>
    <Modal {...$$restProps}>
        <slot />
    </Modal>
</div>

[brunnerh]

The logic of appending the content to the body can also be wrapped in a use action, that way you just need to add one simple wrapper and no additional components.

<script>
  import { portal } from './portal.js';
  // ...
</script>

<div use:portal={document.body}>
  <Modal .../>
</div>

REPL (made for sveltejs/svelte#1133)