From e74f922e8d8b7d8bd9a3d5da0d70ce3cb15a8e8a Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 29 Jan 2026 10:56:44 -0800
Subject: [PATCH] Fix tippy falling off the page

---
 src/app.css                                   | 6 ++++++
 src/app/components/RoomItemEmojiButton.svelte | 2 +-
 src/lib/components/EmojiButton.svelte         | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index f62e9805..5c56e6a1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -362,6 +362,12 @@
   @apply !h-full !w-full !rounded-lg !border-none !bg-inherit !px-4 !text-inherit;
 }
 
+/* tippy popover */
+
+.tippy-box {
+  @apply shadow-xl;
+}
+
 /* emoji picker */
 
 emoji-picker {
diff --git a/src/app/components/RoomItemEmojiButton.svelte b/src/app/components/RoomItemEmojiButton.svelte
index 60f39822..fc4c4f49 100644
--- a/src/app/components/RoomItemEmojiButton.svelte
+++ b/src/app/components/RoomItemEmojiButton.svelte
@@ -18,6 +18,6 @@
     })
 </script>
 
-<EmojiButton {onEmoji} class="btn join-item btn-xs">
+<EmojiButton {onEmoji} class="btn join-item btn-xs" tippyParams={{placement: "bottom-end"}}>
   <Icon icon={SmileCircle} size={4} />
 </EmojiButton>
diff --git a/src/lib/components/EmojiButton.svelte b/src/lib/components/EmojiButton.svelte
index 669cd7fb..97bf84bc 100644
--- a/src/lib/components/EmojiButton.svelte
+++ b/src/lib/components/EmojiButton.svelte
@@ -6,7 +6,7 @@
   import Tippy from "@lib/components/Tippy.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
 
-  const {...props} = $props()
+  const {tippyParams = {}, ...props} = $props()
 
   const open = () => popover?.show()
 
@@ -34,7 +34,7 @@
   bind:popover
   component={EmojiPicker}
   props={{onClick}}
-  params={{trigger: "manual", interactive: true}}>
+  params={{trigger: "manual", interactive: true, ...tippyParams}}>
   <Button onclick={open} class={props.class}>
     {@render props.children?.()}
   </Button>