root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nightly: Emoji-Picker als Portal (document.body) mit sehr hohem z-index keine Überdeckung durch Sounds, korrekte Position

Browse source
This commit is contained in:
vibe-bot 2025-08-09 21:36:06 +02:00
parent 9789a5e931
commit 60a0ac3a82
2 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/src/App.tsx
View file

@ -464,8 +464,8 @@ export default function App() {
setShowEmojiPicker(v=>!v); setShowEmojiPicker(v=>!v);
}} }}
>Custom Emoji</button> >Custom Emoji</button>
{showEmojiPicker && ( {showEmojiPicker && typeof document !== 'undefined' && ReactDOM.createPortal(
<div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 999999 }}> <div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 300000 }}>
{EMOJIS.map((e, i)=> ( {EMOJIS.map((e, i)=> (
<button key={i} onClick={async ()=>{ <button key={i} onClick={async ()=>{
try{ try{
@ -478,7 +478,8 @@ export default function App() {
}catch(err:any){ setError(err?.message||'Badge-Update fehlgeschlagen'); setInfo(null); } }catch(err:any){ setError(err?.message||'Badge-Update fehlgeschlagen'); setInfo(null); }
}}>{e}</button> }}>{e}</button>
))} ))}
</div> </div>,
document.body
)} )}
</div> </div>

1
web/src/styles.css
View file

@ -452,6 +452,7 @@ header p {
display: grid; grid-template-columns: repeat(10, 2rem); gap: .25rem; padding: .5rem; 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; 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); 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 { background: transparent; border: 0; font-size: 1.25rem; cursor: pointer; }
.emoji-picker button:hover { filter: brightness(1.2); } .emoji-picker button:hover { filter: brightness(1.2); }