froxxxy/bscscore
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): prevent winner modal icons from clipping

Browse Source 
Increase top padding, set overflow visible, and position decorative icons inside container so emojis are fully visible.

Refs #26
This commit is contained in:
Frank Schwenk
2025-10-30 10:50:24 +01:00
parent 301d5b131c
commit 634d012097
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/GameCompletionModal.module.css
View File

@@ -26,7 +26,7 @@
.winner-announcement { .winner-announcement {
text-align: center; text-align: center;
margin: 20px 0 0 0; margin: 20px 0 0 0;
padding: 24px 16px; padding: 32px 16px 24px 16px; /* extra top padding to keep icons inside */
background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%); background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
border-radius: 16px; border-radius: 16px;
font-size: 1.2rem; font-size: 1.2rem;
@@ -35,13 +35,13 @@
box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3); box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
animation: celebrationPulse 2s ease-in-out infinite; animation: celebrationPulse 2s ease-in-out infinite;
position: relative; position: relative;
overflow: hidden; overflow: visible; /* avoid clipping decorative icons */
} }
.winner-announcement::before { .winner-announcement::before {
content: '🎉'; content: '🎉';
position: absolute; position: absolute;
top: -10px; top: 6px;
left: 20px; left: 20px;
font-size: 24px; font-size: 24px;
animation: bounce 1s ease-in-out infinite; animation: bounce 1s ease-in-out infinite;
@@ -50,7 +50,7 @@
.winner-announcement::after { .winner-announcement::after {
content: '🏆'; content: '🏆';
position: absolute; position: absolute;
top: -10px; top: 6px;
right: 20px; right: 20px;
font-size: 24px; font-size: 24px;
animation: bounce 1s ease-in-out infinite 0.5s; animation: bounce 1s ease-in-out infinite 0.5s;