diff --git a/frontend/src/pages/QuizPage.jsx b/frontend/src/pages/QuizPage.jsx
index 7fe41eb..099c282 100644
--- a/frontend/src/pages/QuizPage.jsx
+++ b/frontend/src/pages/QuizPage.jsx
@@ -1705,7 +1705,7 @@ const timerStarted = timeLeft !== null
             onClick={() => setRailOpen(true)}>›</button>
         )}
         {/* Main content */}
-        <div style={{ flex: 1, minWidth: 0 }}>
+        <div className="quiz-main">
           <div className="quiz-topbar">
             {examChrome ? (
               <>
diff --git a/frontend/src/pages/QuizPlayer.css b/frontend/src/pages/QuizPlayer.css
index e261e02..a01e781 100644
--- a/frontend/src/pages/QuizPlayer.css
+++ b/frontend/src/pages/QuizPlayer.css
@@ -343,6 +343,19 @@ body:has(.quiz-player.is-boxed) .navbar { margin-bottom: 0; }
 /* Each column scrolls on its own. `min-height: 0` is what lets a grid child
    shrink below its content and become scrollable at all. */
 .quiz-player.is-boxed .quiz-layout > * { min-height: 0; overflow-y: auto; }
+
+/* The middle column is itself two parts: the bar that says where you are, and
+   the question under it. Only the question scrolls — the bar used to go up
+   with it, so the item counter and the tools left the screen exactly when a
+   long stem made you want them. */
+.quiz-main { flex: 1; min-width: 0; }
+.quiz-player.is-boxed .quiz-main {
+  display: flex; flex-direction: column; overflow: hidden;
+}
+.quiz-player.is-boxed .quiz-main > .quiz-topbar { flex: none; }
+.quiz-player.is-boxed .quiz-main > *:not(.quiz-topbar) {
+  flex: 1; min-height: 0; overflow-y: auto;
+}
 .quiz-player.is-boxed .quiz-sidebar { position: static; max-height: none; }
 
 .quiz-footbar {
diff --git a/frontend/src/pages/ResultsPage.jsx b/frontend/src/pages/ResultsPage.jsx
index 6d685d3..e7d2700 100644
--- a/frontend/src/pages/ResultsPage.jsx
+++ b/frontend/src/pages/ResultsPage.jsx
@@ -155,7 +155,7 @@ export default function ResultsPage() {
             onClick={() => setRailOpen(true)}>›</button>
         )}
 
-        <div style={{ flex: 1, minWidth: 0 }}>
+        <div className="quiz-main">
           <div className="quiz-topbar">
             <p className="quiz-question-select is-static">
               <small>Question</small><strong>{current + 1}</strong> of {answers.length}