From 3990b69f42bf43f9c464136039bbc621e72638a2 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Fri, 16 Jan 2026 15:28:45 +0100
Subject: [PATCH] fix: use CSS grid for game controls to keep pill centered
 when next is hidden

---
 src/main.css | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

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