learn: the output pane was unusable on a phone

Measured on a 390x844 phone: page chrome took 263px, the brief took
321px at 38vh, and the 1.4:1 editor/output split left the Tests panel
72px of content — one and a half rows. The reported symptom was "it only
shows a single line", which is exactly what 72px buys.

Three changes, and the third is what makes the other two affordable:

  brief 38vh -> 24vh on phones. It is a third of the screen given to
  text you have usually finished reading by the time you are looking at
  test output.
  editor/output split evened out (1.4:1 -> 1:1.15) with an 11rem floor
  so the panel can never collapse to a sliver again.
  a full-screen button on BOTH the output pane and the task description,
  phones only — which is why the brief can afford to be short by
  default: a long description is one tap from the whole screen.

72px and 1 visible row -> 166px and 3, with either surface expandable to
the full 844. All three full screens (editor, output, brief) are
mutually exclusive; two fixed-inset panels would stack.

Desktop is untouched: both buttons are display:none above 720px, and a
min-width guard undoes the fixed positioning if a viewport widens while
a panel is expanded — otherwise the button would vanish with the media
query and leave no way out.

Verified on a real 390x844 viewport: rows visible without scrolling,
both full screens filling the viewport, mutual exclusivity, and desktop
metrics unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RJujXBsBhXBbQ72tS7E7GV

Author: fuzzie360

src/Learn/scss/_task.scss

@@ -778,6 +778,51 @@
     color: var(--blue);
   }
 
+  /* Phones only. On a desktop the panel already has room, and a second
+     fixed-inset surface competing with the editor's full screen would be
+     clutter. Shown by the media query at the bottom of this file. */
+  /* Same affordance for the task description. Floats within the brief's own
+     scroll box and sticks to the top, so it stays reachable however far down
+     the reader has scrolled. */
+  .brief-fullbtn {
+    display: none;
+    position: sticky;
+    top: 0;
+    float: right;
+    z-index: 2;
+    margin: -.4rem -.4rem 0 .5rem;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    color: var(--muted);
+    font-size: .72rem;
+    padding: .15rem .5rem;
+    height: auto;
+    line-height: 1.5;
+    text-transform: none;
+    box-shadow: none;
+  }
+
+  .panel-fullbtn {
+    display: none;
+    margin-left: auto;
+    background: none;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    color: var(--muted);
+    font-size: .72rem;
+    padding: .15rem .5rem;
+    height: auto;
+    line-height: 1.5;
+    text-transform: none;
+    box-shadow: none;
+  }
+
+  /* clear keeps its own right-alignment only while the button is absent */
+  .btabs .panel-fullbtn + .clearbtn {
+    margin-left: .4rem;
+  }
+
   .bpanel {
     flex: 1;
     overflow-y: auto;
@@ -1271,6 +1316,61 @@
     .ed-hint { display: none; }
   }
 
+  /* ---- phones: the output pane was unusable ----
+     Measured on a 390x844 phone before this block: chrome ate 263px, the brief
+     took 321px at 38vh, and the 1.4:1 editor/output split left the panel 72px
+     of content — one and a half test rows. */
+  @media (max-width: 720px) {
+    .brief {
+      // Now that the brief has its own full screen, it does not need to be
+      // tall by default — which is what buys the output pane its room.
+      max-height: 24vh;
+    }
+
+    .brief-fullbtn { display: inline-block; }
+
+    .brief.brief-full {
+      position: fixed;
+      inset: 0;
+      z-index: 100;
+      max-height: none;
+      border-bottom: none;
+    }
+
+    // even split, and a floor so the panel can never collapse to a sliver
+    .editor { flex: 1; }
+
+    .bottompane {
+      flex: 1.15;
+      min-height: 11rem;
+    }
+
+    .panel-fullbtn { display: inline-block; }
+
+    /* Full screen output. Same z-index as the editor's full screen — they are
+       mutually exclusive in TaskPage, so they never coexist. */
+    .bottompane.bottompane-full {
+      position: fixed;
+      inset: 0;
+      z-index: 100;
+      flex: none;
+      min-height: 0;
+      border-top: none;
+    }
+  }
+
+  /* Safety net: if the viewport widens while the panel is full screen the
+     button vanishes with the media query above, so undo the fixed positioning
+     too — otherwise there would be no way out. */
+  @media (min-width: 721px) {
+    .bottompane.bottompane-full,
+    .brief.brief-full {
+      position: static;
+      inset: auto;
+      z-index: auto;
+    }
+  }
+
   /* ============ completion modal (module / track celebration) ============ */
   .cmodal-overlay {
     position: fixed;

src/Learn/task/TaskPage.jsx

@@ -255,7 +255,7 @@ function TaskInputs({ docs }) {
   );
 }
 
-function BriefPane({ module, task, taskNum, total, inputDocs }) {
+function BriefPane({ module, task, taskNum, total, inputDocs, full, onToggleFull }) {
   const figures = getFigures(module, task);
   const briefRef = useRef(null);
   // Static syntax highlighting for authored <pre><code> blocks. Layout effect
@@ -265,7 +265,18 @@ function BriefPane({ module, task, taskNum, total, inputDocs }) {
     highlightCodeBlocks(briefRef.current);
   }, [task]);
   return (
-    <aside className="brief" ref={briefRef}>
+    <aside className={full ? 'brief brief-full' : 'brief'} ref={briefRef}>
+      {/* Phones only (hidden by media query): the brief is capped at a fraction
+          of a phone screen so the editor and output have room, which makes a
+          long task description a keyhole. */}
+      <button
+        type="button"
+        className="brief-fullbtn"
+        onClick={onToggleFull}
+        aria-label={full ? 'Exit full screen task description' : 'Full screen task description'}
+      >
+        {full ? '✕ Close' : '⛶'}
+      </button>
       <p className="eyebrow">Task {taskNum} of {total}</p>
       <h2>{task.title}</h2>
       <div dangerouslySetInnerHTML={{ __html: task.intro || '' }} />
@@ -352,6 +363,10 @@ function TaskWorkspace({ module, task, taskNum, taskIndex, taskId, total }) {
   const [tab, setTab] = useState('console');
   const [done, setDone] = useState(() => isTaskDone(taskId));
   const [fullscreen, setFullscreen] = useState(false);
+  // Phones only (the button is hidden above 720px). Mutually exclusive with the
+  // editor's full screen — two fixed-inset panels would stack.
+  const [panelFull, setPanelFull] = useState(false);
+  const [briefFull, setBriefFull] = useState(false);
   const [progressTick, setProgressTick] = useState(0);
   const [status, setStatus] = useState(''); // announced via the role=status region
   const [celebration, setCelebration] = useState(null); // null | { kind: 'module' | 'track' }
@@ -709,6 +724,8 @@ function TaskWorkspace({ module, task, taskNum, taskIndex, taskId, total }) {
           taskNum={taskNum}
           total={total}
           inputDocs={inputDocs}
+          full={briefFull}
+          onToggleFull={() => { setFullscreen(false); setPanelFull(false); setBriefFull(f => !f); }}
         />
 
         <div className="editpane">
@@ -720,7 +737,7 @@ function TaskWorkspace({ module, task, taskNum, taskIndex, taskId, total }) {
               <button
                 type="button"
                 className="ed-fullbtn"
-                onClick={() => setFullscreen(f => !f)}
+                onClick={() => { setPanelFull(false); setBriefFull(false); setFullscreen(f => !f); }}
                 aria-label={fullscreen ? 'Exit full screen editor' : 'Full screen editor'}
               >
                 {fullscreen ? '✕ Close' : '⛶ Full screen'}
@@ -745,7 +762,7 @@ function TaskWorkspace({ module, task, taskNum, taskIndex, taskId, total }) {
             />
           </div>
 
-          <div className="bottompane">
+          <div className={panelFull ? 'bottompane bottompane-full' : 'bottompane'}>
             <div
               className="btabs"
               role="tablist"
@@ -778,6 +795,14 @@ function TaskWorkspace({ module, task, taskNum, taskIndex, taskId, total }) {
               >
                 Tests {testBadge && <span className="cnt">{testBadge}</span>}
               </button>
+              <button
+                type="button"
+                className="panel-fullbtn"
+                onClick={() => { setFullscreen(false); setBriefFull(false); setPanelFull(f => !f); }}
+                aria-label={panelFull ? 'Exit full screen output' : 'Full screen output'}
+              >
+                {panelFull ? '✕ Close' : '⛶'}
+              </button>
               <button type="button" className="clearbtn" onClick={() => setLogs([])}>
                 clear
               </button>