mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-03 00:18:06 +00:00
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:
committed by
GitHub
parent
6a78494404
commit
508849a8af
@@ -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}
|
||||
>
|
||||
✕
|
||||
|
||||
Reference in New Issue
Block a user