From a3c1a5c731b801ed11547c4feff30b382addbd1d Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 29 Jan 2026 11:11:08 -0800
Subject: [PATCH] Prevent icon picker from going off screen

---
 src/app/components/IconPicker.svelte       | 31 +++++++++++-----------
 src/app/components/IconPickerDialog.svelte | 13 +++++++++
 src/lib/components/Dialog.svelte           |  1 +
 src/lib/components/FieldInline.svelte      |  2 +-
 src/lib/components/IconPickerButton.svelte | 30 ++++++++++++++++++---
 5 files changed, 57 insertions(+), 20 deletions(-)
 create mode 100644 src/app/components/IconPickerDialog.svelte

diff --git a/src/app/components/IconPicker.svelte b/src/app/components/IconPicker.svelte
index a37075f1..32d3750f 100644
--- a/src/app/components/IconPicker.svelte
+++ b/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>
diff --git a/src/app/components/IconPickerDialog.svelte b/src/app/components/IconPickerDialog.svelte
new file mode 100644
index 00000000..c09c5fd4
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
index e6325da4..f7fc55cf 100644
--- a/src/lib/components/Dialog.svelte
+++ b/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}}
diff --git a/src/lib/components/FieldInline.svelte b/src/lib/components/FieldInline.svelte
index 909f3a1e..235a1a7b 100644
--- a/src/lib/components/FieldInline.svelte
+++ b/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>
diff --git a/src/lib/components/IconPickerButton.svelte b/src/lib/components/IconPickerButton.svelte
index d8820571..0dc7d85f 100644
--- a/src/lib/components/IconPickerButton.svelte
+++ b/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}