fixup! [Dialog]: add customizable media queries for switching to mobi…

…le styles

src/components/dialog/dialog.svelte

@@ -3,7 +3,6 @@
   import { scale } from 'svelte/transition'
   import Button from '../button/button.svelte'
   import Icon from '../icon/icon.svelte'
-  import { onMount } from 'svelte'
 
   type DialogSizes = 'mobile' | 'normal'
 
@@ -46,27 +45,40 @@
     onClose?.()
   }
 
+  let _size: DialogSizes
+
   const setSize = (matches: boolean) => {
-    size = matches ? 'mobile' : 'normal'
+    _size = matches ? 'mobile' : 'normal'
   }
 
-  onMount(() => {
-    if (size) return
+  const changeHandler = (event: MediaQueryListEvent) => setSize(event.matches)
+
+  let mql: MediaQueryList
+  $: {
+    // Ensure any previously set listener is removed
+    mql?.removeEventListener('change', changeHandler)
+
+    // Only set up listener and set _size if consumer hasn't specified a size
+    if (!size) {
+      mql = window.matchMedia(
+        `(max-width: ${mobileBreakpoint}px) and (orientation: portrait), (max-height: ${mobileBreakpoint}px) and (orientation: landscape)`
+      )
 
-    const mql = window.matchMedia(
-      `(max-width: ${mobileBreakpoint}px) and (orientation: portrait), (max-height: ${mobileBreakpoint}px) and (orientation: landscape)`
-    )
-    setSize(mql.matches)
-    mql.addEventListener('change', (event) => setSize(event.matches))
-  })
+      setSize(mql.matches)
+
+      mql.addEventListener('change', changeHandler)
+    } else {
+      _size = size
+    }
+  }
 </script>
 
 {#if isOpen}
   <dialog
     transition:scale={{ duration: animate ? 60 : 0, start: 0.8 }}
     {...$$restProps}
     class="leo-dialog"
-    class:mobile={size === 'mobile'}
+    class:mobile={_size === 'mobile'}
     class:modal
     class:hasHeader
     class:hasActions={$$slots.actions}