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
This commit is contained in:
Bilgehan Demirkaya
2025-11-11 03:34:03 +03:00
committed by GitHub
parent 6a78494404
commit 508849a8af
+3 -3
View File
@@ -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}
>