danvics/pdf-quiz-generator
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

fix: the player's furniture stops pushing the question down the page

Browse source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TqXevQJhxFrM7jJg82cgZN
This commit is contained in:
Daniel 2026-09-12 19:09:55 +02:00
parent d591813f02
commit c099dd16fb
2 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/pages/QuizPage.jsx
View file

@ -1627,7 +1627,7 @@ const timerStarted = timeLeft !== null
)}
{/* Header */}
<div className="card quiz-header-card" style={{ marginBottom: 14 }}>
<div className="card quiz-header-card" style={{ marginBottom: 6 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
<div>
<h2 className="quiz-header-title">{quiz.title}</h2>

35
frontend/src/pages/QuizPlayer.css
View file

@ -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; }