Add ChannelMessageMenuMobile

src/lib/components/Drawer.svelte

@@ -4,7 +4,7 @@
   export let onClose
 </script>
 
-<div class="fixed inset-0 z-modal drawer">
+<div class="drawer fixed inset-0 z-modal">
   <button
     class="absolute inset-0 cursor-pointer bg-black opacity-50"
     transition:fade

src/lib/components/EmojiButton.svelte

@@ -3,7 +3,6 @@
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {between} from "@welshman/lib"
-  import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
@@ -37,7 +36,7 @@
   component={EmojiPicker}
   props={{onClick}}
   params={{trigger: "manual", interactive: true}}>
-  <Button class="btn btn-xs {$$props.class}" on:click={open}>
-    <Icon icon="smile-circle" size={4} />
+  <Button on:click={open} class={$$props.class}>
+    <slot />
   </Button>
 </Tippy>

src/lib/components/EmojiPicker.svelte

@@ -1,3 +1,13 @@
+<style>
+  @media (max-width: 450px) {
+    emoji-picker {
+      max-width: 100%;
+      --num-columns: 6;
+      --category-emoji-size: 1.125rem;
+    }
+  }
+</style>
+
 <script lang="ts">
   import "emoji-picker-element"
   import type {Emoji} from "emoji-picker-element/shared"