From 60a0ac3a828097dc2d5927cfee0367aafa484eba Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sat, 9 Aug 2025 21:36:06 +0200
Subject: [PATCH] =?UTF-8?q?Nightly:=20Emoji-Picker=20als=20Portal=20(docum?=
 =?UTF-8?q?ent.body)=20mit=20sehr=20hohem=20z-index=20=20keine=20=C3=9Cber?=
 =?UTF-8?q?deckung=20durch=20Sounds,=20korrekte=20Position?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx    | 7 ++++---
 web/src/styles.css | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index b0e41a3..cc53611 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -464,8 +464,8 @@ export default function App() {
                             setShowEmojiPicker(v=>!v);
                           }}
                         >Custom Emoji</button>
-                        {showEmojiPicker && (
-                          <div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 999999 }}>
+                        {showEmojiPicker && typeof document !== 'undefined' && ReactDOM.createPortal(
+                          <div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 300000 }}>
                             {EMOJIS.map((e, i)=> (
                               <button key={i} onClick={async ()=>{
                                 try{
@@ -478,7 +478,8 @@ export default function App() {
                                 }catch(err:any){ setError(err?.message||'Badge-Update fehlgeschlagen'); setInfo(null); }
                               }}>{e}</button>
                             ))}
-                          </div>
+                          </div>,
+                          document.body
                         )}
                       </div>
 
diff --git a/web/src/styles.css b/web/src/styles.css
index af97ed4..aa147e8 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -452,6 +452,7 @@ header p {
   display: grid; grid-template-columns: repeat(10, 2rem); gap: .25rem; padding: .5rem;
   max-height: 260px; overflow: auto; background: #0f1530; border:1px solid rgba(255,255,255,.28); border-radius: 12px;
   box-shadow: 0 24px 48px rgba(0,0,0,.6);
+  z-index: 300000;
 }
 .emoji-picker button { background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; }
 .emoji-picker button:hover { filter: brightness(1.2); }