From 1ee2b265b6f939643ddcddb63be93e76cc20056f Mon Sep 17 00:00:00 2001
From: orfelorfel23 <jannik.mueller.jannik+git@googlemail.com>
Date: Sun, 26 Apr 2026 12:50:23 +0200
Subject: [PATCH] Fix navigator button line wrapping; force elements to scale
 and stay purely on a single contiguous row per chunk

---
 public/js/app.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index 7a03aee..05dbed1 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1197,14 +1197,14 @@ function WettkampfQuizPage({ params, navigate }) {
                     return (
                         <div className="flex flex-col gap-1.5 sm:gap-2 items-center w-full">
                             {chunks.map((chunk, rowIdx) => (
-                                <div key={rowIdx} className="flex gap-1 sm:gap-1.5 justify-center w-full flex-wrap">
+                                <div key={rowIdx} className="flex gap-1 sm:gap-1.5 justify-center w-full flex-nowrap">
                                     {chunk.map(({ q, origIndex }) => {
                                         const a = answers[q.id];
                                         const isAnswered = a && a.selected && a.selected.length > 0 && a.selected[0] !== '';
                                         const isCurrent = origIndex === index;
                                         const style = {};
-                                        // w-7 allows for more questions per row on smaller screens
-                                        let cls = 'w-7 h-7 sm:w-8 sm:h-8 md:w-9 md:h-9 rounded-md sm:rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center justify-center shrink-0 ';
+                                        // flex-nowrap with flex-1 aspect-square forces it on one row safely shrinking on mobile
+                                        let cls = 'flex-1 max-w-[2.25rem] aspect-square rounded-md sm:rounded-lg text-xs sm:text-sm font-bold transition-all flex items-center justify-center min-w-0 overflow-hidden shrink ';
                                         if (isCurrent) { cls += 'text-white ring-2'; style.backgroundColor = '#f59e0b'; style.boxShadow = '0 0 0 2px #fcd34d'; }
                                         else if (isAnswered) { cls += 'text-white'; style.backgroundColor = accentColor; }
                                         else cls += 'bg-gray-700 text-gray-400 hover:bg-gray-600';