Prevent icon picker from going off screen

src/app/components/IconPicker.svelte

@@ -43,7 +43,6 @@
   }
 </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..." />
@@ -52,12 +51,12 @@
   <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)}
-          title={icon.name}>
+        onclick={() => handleSelect(icon.url)}>
         <Icon icon={icon.url} class="h-6 w-6" />
       </button>
     {/each}
   </div>
 </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}