From c099dd16fb0a3922f101a2413836d563d42c7dee Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 12 Sep 2026 19:09:55 +0200 Subject: [PATCH] fix: the player's furniture stops pushing the question down the page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three things above the stem — the session's name, the mode row, the "Question 4 of 12" counter — carried eighteen pixels under the header, twenty over the counter and a line of spacing inside it. Together that was a third of the screen before the first word of the question. Tightened, all of it. The clock beside them may no longer be the part that gives: squeezed, "0h 00m" broke after the hours and each of the three readings became two lines of its own height, which is what pushed the group out of the bar it sits in. And Next is an equal half of the bar rather than two thirds of it. It is the only coloured thing down there; it does not also need to be a blue band across most of the window. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01TqXevQJhxFrM7jJg82cgZN --- frontend/src/pages/QuizPage.jsx | 2 +- frontend/src/pages/QuizPlayer.css | 35 +++++++++++++++++++++++-------- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/frontend/src/pages/QuizPage.jsx b/frontend/src/pages/QuizPage.jsx index 683ccd3..5db20f8 100644 --- a/frontend/src/pages/QuizPage.jsx +++ b/frontend/src/pages/QuizPage.jsx @@ -1627,7 +1627,7 @@ const timerStarted = timeLeft !== null )} {/* Header */} -
+

{quiz.title}

diff --git a/frontend/src/pages/QuizPlayer.css b/frontend/src/pages/QuizPlayer.css index 6f0751a..8a1c559 100644 --- a/frontend/src/pages/QuizPlayer.css +++ b/frontend/src/pages/QuizPlayer.css @@ -1,7 +1,11 @@ .container:has(> .quiz-player), .container:has(> .quiz-results) { max-width: 1500px; } .quiz-player, .quiz-results { --primary: #496fa5; --primary-hover: #365b8d; --border: #e8eaf1; --card-shadow: none; --card-radius: 0; --text: #333; --text-muted: #737982; --correct-fg: #327b64; --correct-bg: #e6edf8; --wrong-fg: #a13c51; background: #fff; padding: 24px 32px 40px; min-width: 0; } -.quiz-player .quiz-header-card { padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--border); box-shadow: none; } -.quiz-player .quiz-header-title { font-size: .9rem; font-weight: 500; color: #737982; } +/* Tight. Everything above the stem is furniture — the session's name, the + mode, where you are in it — and eighteen pixels under it plus twenty over + the counter plus the counter's own line spacing pushed the first line of the + question a third of the way down the screen. */ +.quiz-player .quiz-header-card { padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--border); box-shadow: none; } +.quiz-player .quiz-header-title { margin: 0 0 2px; font-size: .9rem; line-height: 1.3; font-weight: 500; color: #737982; } .quiz-player .quiz-code-badge { font-size: .75rem; } .quiz-player .quiz-code-badge code { background: transparent; border: 0; } /* Session rail beside the question, like a Qbank session's left column. @@ -51,11 +55,11 @@ } .quiz-player .quiz-nav-toggle { display: inline-flex; } .quiz-player .progress-bar { height: 3px; } -.quiz-topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 0 20px; margin-bottom: 0; border-bottom: 1px solid var(--border); } +.quiz-topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 6px 0 10px; margin-bottom: 0; border-bottom: 1px solid var(--border); } .quiz-topbar button { border: 1px solid transparent; padding: 10px 13px; background: #f8f9fb; color: #333; cursor: pointer; font: inherit; border-radius: 2px; } .quiz-topbar button:disabled { opacity: .35; cursor: not-allowed; } -.quiz-topbar .quiz-question-select { padding: 0; background: transparent; text-align: left; white-space: nowrap; font-size: 1.15rem; color: #898d92; } -.quiz-question-select small { display: block; font-size: .8rem; margin-bottom: 3px; color: #858b94; } +.quiz-topbar .quiz-question-select { padding: 0; background: transparent; text-align: left; white-space: nowrap; font-size: 1.05rem; line-height: 1.2; color: #898d92; } +.quiz-question-select small { display: block; font-size: .72rem; margin-bottom: 0; line-height: 1.3; color: #858b94; } .quiz-question-select strong { color: #30343a; font-weight: 650; } .quiz-top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .quiz-top-actions button { font-size: .85rem; min-height: 42px; } @@ -251,6 +255,9 @@ .quiz-clock { display: inline-flex; align-items: center; gap: 14px; padding: 2px 12px; border-inline: 1px solid var(--border); + /* Never squeezed by what shares its row. Three readings of known width is + the one thing in the bar whose size is not negotiable. */ + flex: none; } .quiz-clock-pause { width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; @@ -258,8 +265,16 @@ font-size: 0.72rem; color: var(--text-muted); line-height: 1; } .quiz-clock-pause:hover { border-color: var(--primary); color: var(--primary); } -.quiz-clock-cell { display: flex; flex-direction: column; line-height: 1.15; } -.quiz-clock-cell strong { font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--text); } +/* `flex: none` and no wrapping: squeezed between the pause button and whatever + sits beside it, "0h 00m" broke after the hours and the three readings each + became two lines of their own height, which is what pushed the group out of + the bar it sits in. A clock is a fixed-width thing; it may not be the part + that gives. */ +.quiz-clock-cell { display: flex; flex-direction: column; flex: none; line-height: 1.15; } +.quiz-clock-cell strong { + font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--text); + white-space: nowrap; +} .quiz-clock-cell em { font-style: normal; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); @@ -892,8 +907,10 @@ body:has(.quiz-player.is-exam-chrome) .site-footer { display: none; } .quiz-player.is-boxed .quiz-footbar .quiz-nav-controls > .btn-secondary:hover:not(:disabled) { background: var(--bg); color: var(--text); } -/* Two thirds of the bar, because moving on is what the hand is there for. */ -.quiz-player.is-boxed .quiz-footbar .quiz-nav-controls > .btn-primary { flex: 2; } +/* An equal half each. It was two thirds of everything left over, which on a + wide window made Next a blue band across most of the screen — emphasis it + does not need, since it is the only coloured thing down there. */ +.quiz-player.is-boxed .quiz-footbar .quiz-nav-controls > .btn-primary { flex: 1; } @media (max-width: 640px) { .quiz-player.is-boxed .quiz-footbar > .quiz-exit { min-width: 0; flex: 1; }