From 9287d0323d61e1a72c1009f360f04674b7fd2634 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Thu, 20 Nov 2025 16:49:45 -0800
Subject: [PATCH] bugfix: emoji table was too small on firefox

---
 src/client/graphics/layers/EmojiTable.ts | 56 ++++++++++--------------
 1 file changed, 23 insertions(+), 33 deletions(-)

diff --git a/src/client/graphics/layers/EmojiTable.ts b/src/client/graphics/layers/EmojiTable.ts
index 6b4fa0b57..9da4c4cee 100644
--- a/src/client/graphics/layers/EmojiTable.ts
+++ b/src/client/graphics/layers/EmojiTable.ts
@@ -4,7 +4,7 @@ import { EventBus } from "../../../core/EventBus";
 import { AllPlayers } from "../../../core/game/Game";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { TerraNulliusImpl } from "../../../core/game/TerraNulliusImpl";
-import { Emoji, emojiTable, flattenedEmojiTable } from "../../../core/Util";
+import { Emoji, flattenedEmojiTable } from "../../../core/Util";
 import { CloseViewEvent, ShowEmojiMenuEvent } from "../../InputHandler";
 import { SendEmojiIntentEvent } from "../../Transport";
 import { TransformHandler } from "../TransformHandler";
@@ -73,20 +73,10 @@ export class EmojiTable extends LitElement {
 
     return html`
       <div
-        class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-center justify-center z-[10002]"
+        class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-start sm:items-center justify-center z-[10002] pt-4 sm:pt-0"
         @click=${this.handleBackdropClick}
       >
-        <div
-          class="bg-zinc-900/95 p-[6px] flex items-center justify-center rounded-[10px] z-[10003] relative shadow-2xl shadow-black/50 ring-1 ring-white/5"
-          style="
-            width: min(410px, calc(100vw - 60px), calc((100vh - 40px) * 215 / 449));
-            aspect-ratio: 215 / 449;
-            container-type: size;
-          "
-          @contextmenu=${(e: MouseEvent) => e.preventDefault()}
-          @wheel=${(e: WheelEvent) => e.stopPropagation()}
-          @click=${(e: MouseEvent) => e.stopPropagation()}
-        >
+        <div class="relative">
           <!-- Close button -->
           <button
             class="absolute -top-3 -right-3 w-7 h-7 flex items-center justify-center
@@ -95,28 +85,28 @@ export class EmojiTable extends LitElement {
           >
             ✕
           </button>
+
           <div
-            class="flex flex-col"
-            style="transform: scale(calc(100cqw / 215px)); transform-origin: center;"
+            class="bg-zinc-900/95 p-2 sm:p-3 rounded-[10px] z-[10003] shadow-2xl shadow-black/50 ring-1 ring-white/5 
+                   w-[calc(100vw-32px)] sm:w-[400px] max-h-[calc(100vh-60px)] overflow-y-auto"
+            @contextmenu=${(e: MouseEvent) => e.preventDefault()}
+            @wheel=${(e: WheelEvent) => e.stopPropagation()}
+            @click=${(e: MouseEvent) => e.stopPropagation()}
           >
-            ${emojiTable.map(
-              (row) => html`
-                <div class="flex justify-center">
-                  ${row.map(
-                    (emoji) => html`
-                      <button
-                        class="flex transition-transform duration-300 ease justify-center items-center cursor-pointer
-                                border border-solid border-zinc-600 rounded-[8px] bg-zinc-800 hover:bg-zinc-700 active:bg-zinc-600
-                                m-[2px] text-[25px] w-[35px] h-[35px] hover:scale-[1.1] active:scale-[0.95]"
-                        @click=${() => this.onEmojiClicked(emoji)}
-                      >
-                        ${emoji}
-                      </button>
-                    `,
-                  )}
-                </div>
-              `,
-            )}
+            <div class="grid grid-cols-5 gap-1 sm:gap-2">
+              ${flattenedEmojiTable.map(
+                (emoji) => html`
+                  <button
+                    class="flex items-center justify-center cursor-pointer aspect-square
+                           border border-solid border-zinc-600 rounded-lg bg-zinc-800 hover:bg-zinc-700 active:bg-zinc-600
+                           text-3xl sm:text-4xl transition-transform duration-300 hover:scale-110 active:scale-95"
+                    @click=${() => this.onEmojiClicked(emoji)}
+                  >
+                    ${emoji}
+                  </button>
+                `,
+              )}
+            </div>
           </div>
         </div>
       </div>