I can't figure out CSS to set width of the dialog window

[WakeReality]

I feel stupid for asking this, but I just can't wrap my head around how t adjust the width of the modal dialog window.

SvelteKit 1.0 FILE: /src/routes/testing/dialog/+page.svelte

<script lang="ts">
   import Modal, { bind } from 'svelte-simple-modal';
   import Dialog  from '../../../components/ComposeShortMessageDialog.svelte'

    let modalDialog = null;
    $: dialogOpen = modalDialog != null;
    let showModal = () => { modalDialog = bind(Dialog, {
        message: 'Reply to Bulletin Tree Short Message',
        hasForm: true,
        replyTargetId: 13,
        replyTargetMessage: "This is the shortMessage being replied to, number thirteen.",
        replyTargetShow: true 
        });
        console.log("showModal function bind")
    }
</script>

<Modal
  show={modalDialog}
  unstyled={false}
  classBg=""
  classWindowWrap="modalwina"
  classWindow="modalwina"
  classContent=""
  closeButton={false}
  on:close={() => modalDialog = null}
>
</Modal>

<button class="btn reply" on:click={showModal}> Reply </button>

<style>
    .modalwina {
        position: absolute;
        width:500px;
        margin-left: 100px;
    }
</style>

The height is dynamic to the 2nd file, the Dialog, but I just can't determine where the width is set and I'm getting a narrow dialog with scrollbar. Thank you.

[flekschas]

You could do the following:

<Modal show={$modal} styleWindow={{ width: '800px' }} />

or

<style>:global(.modalwina) { width: 800px; }</style>
<Modal show={$modal} classWindowWrap="modalwina" classWindow="modalwina" />

The :global() is important because Svelte scopes class names so in your code, .modalwina gets turned into something like .modalwina-8x9hqz. That's why the styling wasn't applied.

[flekschas]

If you want to keep scoped class names, you could follow https://stackoverflow.com/a/65533389

[WakeReality]

Ok, this worked. Thanks for the fast response. Happy new year.