Jannik/Quizalarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix navigator button line wrapping; force elements to scale and stay purely on a single contiguous row per chunk

Browse Source
This commit is contained in:
Jannik
2026-04-26 12:50:23 +02:00
parent d665a98c7d
commit 1ee2b265b6
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/app.js
+3 -3
View File
@@ -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';