Prevent icon picker from going off screen

src/lib/components/IconPickerButton.svelte

@@ -1,17 +1,34 @@
 <script lang="ts">
   import {type Instance} from "tippy.js"
   import {between, throttle} from "@welshman/lib"
+  import {isMobile} from "@lib/html"
   import Button from "@lib/components/Button.svelte"
+  import Dialog from "@lib/components/Dialog.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import IconPicker from "@app/components/IconPicker.svelte"
+  import IconPickerDialog from "@app/components/IconPickerDialog.svelte"
 
   const {...props} = $props()
 
-  const open = () => popover?.show()
+  const open = () => {
+    if (isMobile) {
+      showIconPicker = true
+    } else {
+      popover?.show()
+    }
+  }
+
+  const close = () => {
+    if (isMobile) {
+      showIconPicker = false
+    } else {
+      popover?.hide()
+    }
+  }
 
   const onClick = (iconUrl: string) => {
     props.onSelect(iconUrl)
-    popover?.hide()
+    close()
   }
 
   const onMouseMove = throttle(300, ({clientX, clientY}: any) => {
@@ -24,6 +41,7 @@
     }
   })
 
+  let showIconPicker = $state(false)
   let popover: Instance | undefined = $state()
 </script>
 
@@ -31,10 +49,16 @@
 
 <Tippy
   bind:popover
-  component={IconPicker}
+  component={IconPickerDialog}
   props={{onSelect: onClick}}
   params={{trigger: "manual", interactive: true}}>
   <Button onclick={open} class={props.class}>
     {@render props.children?.()}
   </Button>
 </Tippy>
+
+{#if showIconPicker}
+  <Dialog onClose={close}>
+    <IconPicker onSelect={onClick} />
+  </Dialog>
+{/if}