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 {
text-align: center;
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%);
border-radius: 16px;
font-size: 1.2rem;
@@ -35,13 +35,13 @@
box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
animation: celebrationPulse 2s ease-in-out infinite;
position: relative;
overflow: hidden;
overflow: visible; /* avoid clipping decorative icons */
}
.winner-announcement::before {
content: '🎉';
position: absolute;
top: -10px;
top: 6px;
left: 20px;
font-size: 24px;
animation: bounce 1s ease-in-out infinite;
@@ -50,7 +50,7 @@
.winner-announcement::after {
content: '🏆';
position: absolute;
top: -10px;
top: 6px;
right: 20px;
font-size: 24px;
animation: bounce 1s ease-in-out infinite 0.5s;