Fix tippy falling off the page

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 {

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>

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>