public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

fix: use CSS grid for game controls to keep pill centered when next is hidden

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-16 15:28:45 +01:00
parent 9328399dcb
commit 813d669302
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/main.css
View File

@@ -893,8 +893,8 @@ kbd {
/* ================= GAME CONTROLS ================= */ /* ================= GAME CONTROLS ================= */
.game-controls { .game-controls {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: 1fr auto 1fr;
align-items: center; align-items: center;
padding: var(--spacing-md); padding: var(--spacing-md);
background: var(--panel-bg); background: var(--panel-bg);
@@ -902,8 +902,16 @@ kbd {
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.08); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.08);
} }
.game-controls.centered { .game-controls #prev-btn {
justify-content: center; justify-self: start;
}
.game-controls .module-pill {
justify-self: center;
}
.game-controls #next-btn {
justify-self: end;
} }
/* ================= SIDEBAR ================= */ /* ================= SIDEBAR ================= */