jozamudi/battle-royal-tetris
1
0
Fork 0
Code Issues Pull Requests Activity

Optimize mobile UI with scaling and reduced info

Browse Source 
Option 2: Scale battle grid to 70% on mobile
Option 4: Reduce board-info padding and font size, hide next/hold previews
This commit is contained in:
Josue Zamudio
2026-03-20 09:52:26 -07:00
parent 94b524bcd7
commit e5a5e0eda9
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+15 -1
View File
@@ -513,8 +513,22 @@ button:active {
display: flex; display: flex;
} }
/* Option 2: Scale down the entire battle grid for mobile */
#battle-grid { #battle-grid {
height: 60vh; height: 50vh;
transform: scale(0.7);
transform-origin: center center;
margin-bottom: -60px; /* Compensate for scale to prevent overflow */
}
/* Option 4: Reduce board info height and hide previews on mobile */
.player-board .board-info {
padding: 5px 2px;
font-size: 0.45rem;
}
.player-board .board-info:has(canvas) {
display: none; /* Hide next/hold previews on mobile to save space */
} }
.player-board.spectator { .player-board.spectator {