Prevent icon picker from going off screen

src/app/components/IconPicker.svelte

@@ -43,21 +43,20 @@
   }
 </script>
 
-<div class="w-96 rounded-box bg-base-100 p-4 shadow-2xl">
-  <label class="input input-bordered flex w-full items-center gap-2">
-    <Icon icon={Magnifier} />
-    <input bind:value={searchTerm} class="grow" type="text" placeholder="Search icons..." />
-  </label>
-  <div class="mt-2 max-h-80 overflow-y-auto">
-    <div class="grid grid-cols-8 gap-2 p-2">
-      {#each filteredIcons as icon}
-        <button
-          class="flex aspect-square items-center justify-center rounded-box transition-colors hover:bg-primary hover:text-primary-content"
-          onclick={() => handleSelect(icon.url)}
-          title={icon.name}>
-          <Icon icon={icon.url} class="h-6 w-6" />
-        </button>
-      {/each}
-    </div>
+<label class="input input-bordered flex w-full items-center gap-2">
+  <Icon icon={Magnifier} />
+  <input bind:value={searchTerm} class="grow" type="text" placeholder="Search icons..." />
+</label>
+<div class="mt-2 max-h-80 overflow-y-auto">
+  <div class="grid grid-cols-8 gap-2 p-2">
+    {#each filteredIcons as icon}
+      <button
+        type="button"
+        title={icon.name}
+        class="flex aspect-square items-center justify-center rounded-box transition-colors hover:bg-primary hover:text-primary-content"
+        onclick={() => handleSelect(icon.url)}>
+        <Icon icon={icon.url} class="h-6 w-6" />
+      </button>
+    {/each}
   </div>
 </div>

src/app/components/IconPickerDialog.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import IconPicker from "@app/components/IconPicker.svelte"
+
+  type Props = {
+    onSelect: (iconUrl: string) => void
+  }
+
+  const {onSelect}: Props = $props()
+</script>
+
+<div class="w-96 rounded-box bg-base-100 p-4 shadow-2xl">
+  <IconPicker {onSelect} />
+</div>

src/lib/components/Dialog.svelte

@@ -31,6 +31,7 @@
 
 <div class="center fixed inset-0 z-modal">
   <button
+    type="button"
     aria-label="Close dialog"
     class="absolute inset-0 cursor-pointer bg-[#ccc] opacity-75 dark:bg-black"
     transition:fade={{duration: 300}}

src/lib/components/FieldInline.svelte

@@ -9,7 +9,7 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 {props.class}">
+<div class="grid grid-cols-1 gap-2 lg:gap-6 lg:grid-cols-3 {props.class}">
   <label class="flex items-center gap-2 font-bold">
     {@render props.label?.()}
   </label>

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}