From 3d9e03da57a3385b1181511aa4331dc6664856b8 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sat, 9 Aug 2025 21:29:11 +0200
Subject: [PATCH] =?UTF-8?q?Nightly:=20Emoji-Picker=20fix=20=20als=20fixed?=
 =?UTF-8?q?=20Overlay=20neben=20Button=20(hoher=20z-index)=20statt=20?=
 =?UTF-8?q?=C3=BCberlagertem=20Inline-Panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx    | 15 +++++++++++----
 web/src/styles.css |  1 +
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index b091923..a844112 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -29,9 +29,9 @@ export default function App() {
   const [editingCategoryId, setEditingCategoryId] = useState<string>('');
   const [editingCategoryName, setEditingCategoryName] = useState<string>('');
   const [showEmojiPicker, setShowEmojiPicker] = useState<boolean>(false);
-  const [showEmojiRemovePicker, setShowEmojiRemovePicker] = useState<boolean>(false);
   const emojiPickerRef = useRef<HTMLDivElement|null>(null);
-  const emojiRemovePickerRef = useRef<HTMLDivElement|null>(null);
+  const emojiTriggerRef = useRef<HTMLButtonElement|null>(null);
+  const [emojiPos, setEmojiPos] = useState<{left:number; top:number}>({ left: 0, top: 0 });
   const EMOJIS = useMemo(()=>{
     // einfache, breite Auswahl gängiger Emojis; kann später erweitert/extern geladen werden
     const groups = [
@@ -454,11 +454,18 @@ export default function App() {
                       {/* Custom Badge Picker */}
                       <div style={{ position:'relative' }}>
                         <button
+                          ref={emojiTriggerRef}
                           className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300"
-                          onClick={()=> setShowEmojiPicker(v=>!v)}
+                          onClick={()=> {
+                            try{
+                              const r = emojiTriggerRef.current?.getBoundingClientRect();
+                              if(r){ setEmojiPos({ left: r.left, top: r.bottom + 8 }); }
+                            }catch{}
+                            setShowEmojiPicker(v=>!v);
+                          }}
                         >Custom Emoji</button>
                         {showEmojiPicker && (
-                          <div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'absolute', top:'110%', right:0, zIndex: 99999 }}>
+                          <div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 999999 }}>
                             {EMOJIS.map((e, i)=> (
                               <button key={i} onClick={async ()=>{
                                 try{
diff --git a/web/src/styles.css b/web/src/styles.css
index 21b4a9c..7ace006 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -451,6 +451,7 @@ header p {
 .emoji-picker {
   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);
 }
 .emoji-picker button { background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; }
 .emoji-picker button:hover { filter: brightness(1.2); }