From 655f113a9eb625a62cdc267449e455dd311e78e0 Mon Sep 17 00:00:00 2001
From: Erwan Leboucher <erwanleboucher@gmail.com>
Date: Sun, 6 Sep 2026 15:53:15 +0200
Subject: [PATCH 1/2] fix(composer): give emoticons their own cell size and
 make the merged caps apply

---
 src/lib/ui/primitives/EmoteBoard.svelte  | 18 +++++++++++-------
 src/lib/ui/primitives/SettingsRow.svelte |  6 +++---
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/lib/ui/primitives/EmoteBoard.svelte b/src/lib/ui/primitives/EmoteBoard.svelte
index 767cc20b..ec1a6c0c 100644
--- a/src/lib/ui/primitives/EmoteBoard.svelte
+++ b/src/lib/ui/primitives/EmoteBoard.svelte
@@ -82,7 +82,7 @@
   });
 
   let gifTab = $derived(tab === 'gif');
-  let cellSize = $derived(tab === 'sticker' ? 72 : 32);
+  let cellSize = $derived(tab === 'sticker' ? 72 : tab === 'emoticon' ? 48 : 32);
 
   let boardStyle = $derived.by(() => {
     const size = resizable ? readBoardSize() : null;
@@ -365,7 +365,7 @@
         {/if}
       </nav>
 
-      <div class={['grids', { sticker: tab === 'sticker' }]}>
+      <div class={['grids', { sticker: tab === 'sticker', emoji: tab === 'emoticon' }]}>
         {#if onPickUnicode && query.trim() !== ''}
           {@const text = query.trim()}
           <button
@@ -665,9 +665,9 @@
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-100);
+    justify-content: center;
     list-style: none;
     margin: 0 0 var(--space-300);
-    justify-content: center;
     padding: 0;
   }
 
@@ -675,6 +675,10 @@
     --emote-cell: 5rem;
   }
 
+  .grids.emoji {
+    --emote-cell: 3.5rem;
+  }
+
   .grids li button,
   .grids .unicode button {
     align-items: center;
@@ -688,10 +692,10 @@
     padding: var(--space-100);
     width: var(--emote-cell, 2.5rem);
 
-    span {
-        max-width: 100%;
-        max-height: 100%;
-      }
+    :global(span) {
+      max-height: 100%;
+      max-width: 100%;
+    }
   }
 
   /* Sized to the 32px custom emote beside it, not to the surrounding type. */
diff --git a/src/lib/ui/primitives/SettingsRow.svelte b/src/lib/ui/primitives/SettingsRow.svelte
index f3d56db6..d8f1eab7 100644
--- a/src/lib/ui/primitives/SettingsRow.svelte
+++ b/src/lib/ui/primitives/SettingsRow.svelte
@@ -75,9 +75,9 @@
     min-height: calc(var(--control-height-medium) + var(--space-300));
     padding: var(--space-300) var(--space-400);
 
-    img {
-        max-height: var(--space-900);
-      }
+    :global(img) {
+      max-height: var(--space-900);
+    }
   }
 
   :global(.setting-row + .setting-row) {

From e6ed1a6b40cb27904dab27ef2ea079453b099599 Mon Sep 17 00:00:00 2001
From: Erwan Leboucher <erwanleboucher@gmail.com>
Date: Sun, 6 Sep 2026 15:58:16 +0200
Subject: [PATCH 2/2] fix(viewer): make a flick dismiss only once it has
 travelled

---
 src/lib/features/room/MediaViewer.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/features/room/MediaViewer.svelte b/src/lib/features/room/MediaViewer.svelte
index 9e688ae3..a5d9a56b 100644
--- a/src/lib/features/room/MediaViewer.svelte
+++ b/src/lib/features/room/MediaViewer.svelte
@@ -394,7 +394,9 @@
     const settled = { x: swipeX, y: swipeY };
     endSwipe();
     if (axis === 'vertical') {
-      if (Math.abs(settled.y) > SWIPE_THRESHOLD || Math.abs(velocityY) > VELOCITY_THRESHOLD) {
+      const travelled = Math.abs(settled.y);
+      const flicked = Math.abs(velocityY) > VELOCITY_THRESHOLD && travelled > SWIPE_THRESHOLD / 2;
+      if (travelled > SWIPE_THRESHOLD || flicked) {
         onClose();
         return true;
       }