From 508849a8af36e986c3710da60769b16ccee73f0f Mon Sep 17 00:00:00 2001
From: Bilgehan Demirkaya <64328743+bilgehandk@users.noreply.github.com>
Date: Tue, 11 Nov 2025 03:34:03 +0300
Subject: [PATCH] Fix Emoji Panel Z-Index (#2421)

## Description: Fix Emoji Panel Hidden Behind Player Info Panel

According to : https://github.com/openfrontio/OpenFrontIO/issues/2367

After my previous Player Info Panel layout fix, the Emoji Panel was
accidentally rendered behind it (see
[comment](https://github.com/openfrontio/OpenFrontIO/pull/2410#issuecomment-3507266463)).

This PR updates EmojiTable.ts to ensure the Emoji Panel displays
correctly in front of the Player Info Panel.

Changes:

Increased z-index values for the Emoji backdrop, content, and close
button above z-[10001].

backdrop: z-[10002]

content: z-[10003]

close button: z-[10004]

Expected outcome:
The Emoji picker (backdrop, content, and close button) now correctly
appears above the Player Panel.

<img width="1325" height="857" alt="Ekran Resmi 2025-11-09 09 42 38"
src="https://github.com/user-attachments/assets/08f81d88-70be-4690-b13f-01f09766df04"
/>

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

Discord Username : bilgehandk
---
 src/client/graphics/layers/EmojiTable.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/client/graphics/layers/EmojiTable.ts b/src/client/graphics/layers/EmojiTable.ts
index ef2745280..6b4fa0b57 100644
--- a/src/client/graphics/layers/EmojiTable.ts
+++ b/src/client/graphics/layers/EmojiTable.ts
@@ -73,11 +73,11 @@ export class EmojiTable extends LitElement {
 
     return html`
       <div
-        class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-center justify-center z-[9998]"
+        class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-center justify-center z-[10002]"
         @click=${this.handleBackdropClick}
       >
         <div
-          class="bg-zinc-900/95 p-[6px] flex items-center justify-center rounded-[10px] z-[9999] relative shadow-2xl shadow-black/50 ring-1 ring-white/5"
+          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;
@@ -90,7 +90,7 @@ export class EmojiTable extends LitElement {
           <!-- Close button -->
           <button
             class="absolute -top-3 -right-3 w-7 h-7 flex items-center justify-center
-                    bg-zinc-700 hover:bg-red-500 text-white rounded-full shadow transition-colors z-[10000]"
+                    bg-zinc-700 hover:bg-red-500 text-white rounded-full shadow transition-colors z-[10004]"
             @click=${this.hideTable}
           >
             ✕