From 105c643258654608cf3cbaaa5489befe6a455ed3 Mon Sep 17 00:00:00 2001
From: Filip Leonarski <filip.leonarski@psi.ch>
Date: Thu, 12 Nov 2026 18:57:13 +0100
Subject: [PATCH] frontend: live-test fixes - dark panel titles, phone width,
 rugnux-live empty states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dark mode: the panel title band kept the light mode's pale indigo, so the light
text on it was invisible. It is now the drawer's selected-entry tint at night.

Phone width (390 px): Plotly plots were drawn to the box they had when the
drawer was open and never redrawn, as `responsive` follows the window only - the
Plot component now resizes them with a ResizeObserver on their own box. The
dashboard plot toolbar's 500 px minimum width made the page overflow; the
toolbar wraps and the card takes its own height below md. On the rugnux page
the By-resolution and Collection plots took their height from boxes that below
xl take their height from the plots, so the plots overflowed onto the strip:
fixed heights below xl, single column collection plots and hero tiles two or
three to a row, the progress details under the bars. The top bar's three
action buttons go to a second dense row and the wordmark is hidden below sm.
The preview and data-collection pages stack to one column.

During a rotation collection with rugnux live the per-image plots are empty by
design (the values come with rugnux's first pass): the empty plot now says so
instead of showing autoscaled axes, and the statistics card shows the
collection's progress in percent while measuring, as the efficiency is over the
images expected and read like a fault.

The rugnux page header no longer shows "Done ·" when a run has no verdict, and
the Collection strip says how many images are held for the serial pre-pass (or
are in, for a rotation run) instead of "waiting for images".

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HVeDQsU5a8AJUdJPgWevAK
---
 frontend/src/App.tsx                          |  8 +--
 frontend/src/components/DataCollection.tsx    |  8 +--
 .../src/components/DataProcessingPlot.tsx     | 17 +++++-
 .../src/components/DataProcessingPlots.tsx    | 11 ++--
 .../src/components/MeasurementStatistics.tsx  | 12 ++--
 frontend/src/components/Plot.jsx              | 18 +++++-
 frontend/src/components/PreviewImage.tsx      |  4 +-
 .../src/components/RugnuxCollectionPlots.tsx  | 10 +++-
 frontend/src/components/RugnuxHero.tsx        |  6 +-
 frontend/src/components/RugnuxPage.tsx        | 15 +++--
 frontend/src/components/RugnuxProgress.tsx    |  7 ++-
 frontend/src/components/SettingsPanel.tsx     |  7 ++-
 frontend/src/components/StatusBar.tsx         | 55 ++++++++++++-------
 13 files changed, 123 insertions(+), 55 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 39e3c8831..b73aa5b25 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -28,7 +28,7 @@ import _ from "lodash";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-import StatusBar from "./components/StatusBar";
+import StatusBar, { StatusBarSpacer } from "./components/StatusBar";
 import ErrorMessage from "./components/ErrorMessage";
 import DataProcessingPlots from "./components/DataProcessingPlots";
 import MeasurementStatistics from "./components/MeasurementStatistics";
@@ -164,7 +164,7 @@ function App() {
                         <DataProcessingPlots height={550} type={plot_type.BKG_ESTIMATE}/>
                     </Grid>
                     <Grid item xs={12} lg={4}>
-                        <MeasurementStatistics s={s.measurement ?? {}}/>
+                        <MeasurementStatistics s={s.measurement ?? {}} measuring={isMeasuring}/>
                     </Grid>
                     <RugnuxStatus/>
                     <Grid item xs={12} lg={8}>
@@ -270,7 +270,7 @@ function App() {
                         sx={{ width: drawerWidth, flexShrink: 0,
                               '& .MuiDrawer-paper': { width: drawerWidth, boxSizing: 'border-box',
                                                       bgcolor: drawer.bg, borderRight: 'none' } }}>
-                    <Toolbar/>
+                    <StatusBarSpacer/>
                     <Box sx={{ overflow: 'auto', pb: 9 }}>
                         {sections.map((sec, i) => (
                             <List key={i} subheader={sec.subheader
@@ -299,7 +299,7 @@ function App() {
                 </Drawer>
             )}
             <Box component="main" sx={{ flexGrow: 1, p: 3, pb: '84px', minWidth: 0 }}>
-                <Toolbar/>
+                <StatusBarSpacer/>
                 <ErrorMessage s={s.broker}/>
                 <Box sx={{ maxWidth: activeItem.wide ? 3400 : 1300, mx: 'auto', mt: 2 }}>
                     {activeItem.render?.()}
diff --git a/frontend/src/components/DataCollection.tsx b/frontend/src/components/DataCollection.tsx
index 6bcd6515a..73cf2990e 100644
--- a/frontend/src/components/DataCollection.tsx
+++ b/frontend/src/components/DataCollection.tsx
@@ -94,7 +94,7 @@ function DataCollection({frame_time_us}: MyProps) {
                        value={tokens}
                        sx={{width:"90%"}}
             />
-            <Stack direction="row" spacing={2} sx={{width: '90%'}}>
+            <Stack direction={{xs: "column", sm: "row"}} spacing={2} sx={{width: '90%'}}>
                 <NumberTextField
                     label={"Number of images per trigger"}
                     callback={(val: number, err: boolean) => {
@@ -137,7 +137,7 @@ function DataCollection({frame_time_us}: MyProps) {
                     default={s.images_per_file}
                 />
             </Stack>
-            <Stack direction="row" spacing={2} sx={{width: '90%'}}>
+            <Stack direction={{xs: "column", sm: "row"}} spacing={2} sx={{width: '90%'}}>
                 <NumberTextField
                     label={"Beam X [pxl]"}
                     callback={(val: number, err: boolean) => {
@@ -196,7 +196,7 @@ function DataCollection({frame_time_us}: MyProps) {
                 </RadioGroup>
             </FormControl>
             {mode === 'rotation' && (
-                <Stack direction="row" spacing={2} sx={{width: '90%'}}>
+                <Stack direction={{xs: "column", sm: "row"}} spacing={2} sx={{width: '90%'}}>
                     <NumberTextField
                         label="Start angle"
                         callback={(val: number) => setGoniometer(prev => ({...prev, start: val}))}
@@ -220,7 +220,7 @@ function DataCollection({frame_time_us}: MyProps) {
                 </Stack>
             )}
             {mode === 'grid' && (
-                <Stack direction="row" spacing={2} sx={{width: '90%'}}>
+                <Stack direction={{xs: "column", sm: "row"}} spacing={2} sx={{width: '90%'}}>
                     <NumberTextField
                         label="Grid elements (fast dim.)"
                         callback={(val: number) => setGrid(prev => ({...prev, n_fast: val}))}
diff --git a/frontend/src/components/DataProcessingPlot.tsx b/frontend/src/components/DataProcessingPlot.tsx
index bdd485a1a..539b8badd 100644
--- a/frontend/src/components/DataProcessingPlot.tsx
+++ b/frontend/src/components/DataProcessingPlot.tsx
@@ -3,11 +3,20 @@ import {ReactNode} from 'react';
 import {useQuery} from "@tanstack/react-query";
 import ShowChartIcon from "@mui/icons-material/ShowChart";
 import {azint_unit, plot_type, plot_unit_x} from "../client";
-import {getPreviewPlotOptions} from "../client/@tanstack/react-query.gen";
+import {getConfigRugnuxOptions, getPreviewPlotOptions, getRugnuxStatusOptions} from "../client/@tanstack/react-query.gen";
 import MultiLinePlotWrapper from "./MultiLinePlotWrapper";
 import EmptyState from "./EmptyState";
 import {useTokenRequired} from "../auth";
 
+// Whether rugnux live is on a run: the per-image values then come with its first pass over the images,
+// not image by image. The same queries the rugnux card polls, so this costs no request of its own.
+function useRugnuxRunning() {
+    const {data: settings} = useQuery({...getConfigRugnuxOptions(), refetchInterval: 2000});
+    const enabled = settings?.enable === true;
+    const {data: s} = useQuery({...getRugnuxStatusOptions(), refetchInterval: 1000, enabled});
+    return enabled && s?.state === "Running";
+}
+
 type MyProps = {
     type: plot_type;
     binning: number;
@@ -108,6 +117,7 @@ function DataProcessingPlot({type, binning, angle, azint}: MyProps) {
     });
 
     const tokenRequired = useTokenRequired();
+    const rugnuxRunning = useRugnuxRunning();
 
     if (isError
         || (plots === undefined)
@@ -116,6 +126,11 @@ function DataProcessingPlot({type, binning, angle, azint}: MyProps) {
         return <EmptyState icon={<ShowChartIcon fontSize="inherit"/>}
                            text={tokenRequired ? "Dataset token required (key button in the top bar)" : "No plots available"}/>;
 
+    // a plot with no points (an image without a value is left out): nothing measured yet
+    if (plots.plot.every(d => d.y.length === 0))
+        return <EmptyState icon={<ShowChartIcon fontSize="inherit"/>}
+                           text={rugnuxRunning ? "Per-image values come with rugnux's first pass over the images" : "No values yet"}/>;
+
     let data: PlotlyData = [];
     if ((plots.plot[0].z !== undefined)
         && (plots.plot[0].z.length > 0)) {
diff --git a/frontend/src/components/DataProcessingPlots.tsx b/frontend/src/components/DataProcessingPlots.tsx
index bff4a20bf..8dbe43bd1 100644
--- a/frontend/src/components/DataProcessingPlots.tsx
+++ b/frontend/src/components/DataProcessingPlots.tsx
@@ -31,11 +31,12 @@ function DataProcessingPlots({type: initialType, height}: MyProps) {
         setBinning(String(event.target.value).toString());
     };
 
-    return <Paper style={{textAlign: 'center'}} sx={{ height: height, width: "100%" }}>
-        <Toolbar>
+    // On a phone the toolbar wraps, the select above the three controls, and the card takes the height it needs
+    return <Paper style={{textAlign: 'center'}} sx={{ height: {xs: "auto", md: height}, width: "100%" }}>
+        <Toolbar sx={{ flexWrap: {xs: "wrap", md: "nowrap"} }}>
 
-            <Grid container sx={{ minWidth: 500 }} >
-                <FormControl variant="standard" sx={{ m: 1, minWidth: 500 }}>
+            <Grid container sx={{ minWidth: {md: 500} }} >
+                <FormControl variant="standard" sx={{ m: 1, minWidth: {xs: 200, md: 500} }}>
 
                     <Select
                         value={tab}
@@ -124,7 +125,7 @@ function DataProcessingPlots({type: initialType, height}: MyProps) {
                 </FormControl>
             </Grid>
         </Toolbar>
-        <Box sx={{width:"95%", height: height - 150}} >
+        <Box sx={{width:"95%", height: {xs: 320, md: height - 150}}} >
             <DataProcessingPlot type={type} binning={Number(binning)} angle={angleUnits}
                                 azint={azintUnit}/>
         </Box>
diff --git a/frontend/src/components/MeasurementStatistics.tsx b/frontend/src/components/MeasurementStatistics.tsx
index 6af42e009..d65b12358 100644
--- a/frontend/src/components/MeasurementStatistics.tsx
+++ b/frontend/src/components/MeasurementStatistics.tsx
@@ -7,9 +7,14 @@ import SettingsPanel from "./SettingsPanel";
 
 type MyProps = {
     s: measurement_statistics,
+    measuring?: boolean,
 };
 
-function MeasurementStatistics({s}: MyProps) {
+function MeasurementStatistics({s, measuring}: MyProps) {
+    // the efficiency is over the images expected, so while the collection runs it is its progress
+    const efficiency = s.collection_efficiency === undefined ? "-"
+        : measuring ? `${(100 * s.collection_efficiency).toFixed(0)} % so far`
+            : (Math.floor(s.collection_efficiency * 1000.0) / 1000.0).toFixed(3);
     return (
         <SettingsPanel title="Measurement statistics" sx={{ minHeight: 550 }}>
                 <TableContainer component={Paper} style={{marginLeft: "auto", marginRight: "auto"}}>
@@ -51,9 +56,8 @@ function MeasurementStatistics({s}: MyProps) {
 
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row"> Data acquisition efficiency: </TableCell>
-                                <TableCell align="right">{(s.collection_efficiency !== undefined)
-                                    ? (Math.floor(s.collection_efficiency * 1000.0) / 1000.0).toFixed(3) : "-"}</TableCell>
+                                <TableCell component="th" scope="row"> {measuring ? "Data acquisition progress:" : "Data acquisition efficiency:"} </TableCell>
+                                <TableCell align="right">{efficiency}</TableCell>
                             </TableRow>
                             <TableRow>
                                 <TableCell component="th" scope="row"> Indexing rate: </TableCell>
diff --git a/frontend/src/components/Plot.jsx b/frontend/src/components/Plot.jsx
index 9733b4f28..40edfc1fd 100644
--- a/frontend/src/components/Plot.jsx
+++ b/frontend/src/components/Plot.jsx
@@ -4,9 +4,25 @@
 // mapbox, geo, ...) which dominates the JS payload.
 // Not using TypeScript, as plotly is not TypeScript :(
 
+import {useEffect, useRef} from "react";
 import createPlotlyComponent from "react-plotly.js/factory";
 import Plotly from "plotly.js-cartesian-dist-min";
 
-const Plot = createPlotlyComponent(Plotly);
+const PlotlyPlot = createPlotlyComponent(Plotly);
+
+// Plotly's `responsive` config follows the window only; a plot's own box also changes when the
+// drawer opens or closes, so the plot is redrawn to its box whenever that resizes.
+function Plot(props) {
+    const observer = useRef(null);
+    useEffect(() => () => observer.current?.disconnect(), []);
+    const onInitialized = (figure, graphDiv) => {
+        observer.current?.disconnect();
+        // a hidden plot cannot be resized: Plotly rejects, and the redraw comes with the next data
+        observer.current = new ResizeObserver(() => Plotly.Plots.resize(graphDiv).catch(() => {}));
+        observer.current.observe(graphDiv);
+        props.onInitialized?.(figure, graphDiv);
+    };
+    return <PlotlyPlot {...props} onInitialized={onInitialized}/>;
+}
 
 export default Plot;
diff --git a/frontend/src/components/PreviewImage.tsx b/frontend/src/components/PreviewImage.tsx
index faf8f8739..52a7bcea7 100644
--- a/frontend/src/components/PreviewImage.tsx
+++ b/frontend/src/components/PreviewImage.tsx
@@ -282,7 +282,7 @@ function PreviewImage({measuring, min_image_number, max_image_number}: MyProps)
 
         <Grid container spacing={3}>
 
-            <Grid item xs={8}>
+            <Grid item xs={12} md={8}>
                 <Paper sx={{width: "100%", height: "100%", p: 1,
                             display: "flex", justifyContent: "center", alignItems: "center"}}>
                     {(!connectionError && (sUrl !== null)) ?
@@ -302,7 +302,7 @@ function PreviewImage({measuring, min_image_number, max_image_number}: MyProps)
                     }
                 </Paper>
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={12} md={4}>
                 <Paper sx={{width: "100%", height: "100%"}}>
                     <br/>
                     <Stack spacing={2} direction="column" sx={{
diff --git a/frontend/src/components/RugnuxCollectionPlots.tsx b/frontend/src/components/RugnuxCollectionPlots.tsx
index 7cdf6882e..38f284c8d 100644
--- a/frontend/src/components/RugnuxCollectionPlots.tsx
+++ b/frontend/src/components/RugnuxCollectionPlots.tsx
@@ -41,6 +41,12 @@ function RugnuxCollectionPlots({s, height}: { s: rugnux_live_status, height: num
     const indexing = useCollectionPlot(plot_type.INDEXING_RATE, s);
     const scales = s.frame_scales;
     const images = Math.max(s.images_expected, s.images_received, 1);
+    // Before the first point: the images are in but not yet looked at - a serial run holds them for the
+    // pre-pass, a rotation run's per-image values come with rugnux's first pass
+    const noPoints = s.state !== "Running" ? "no images analysed"
+        : s.images_received === 0 ? "waiting for images"
+            : s.stills ? `${s.images_received.toLocaleString()} images held for the pre-pass`
+                : `${s.images_received.toLocaleString()} images in · spots and background with rugnux's first pass`;
 
     const common = {paper_bgcolor: "rgba(0,0,0,0)", plot_bgcolor: "rgba(0,0,0,0)", font, height, margin: PLOT_MARGIN,
         showlegend: false, xaxis: {...axis, range: [0, images - 1], title: {text: "image", standoff: 2, font: {size: size - 1}}}};
@@ -58,7 +64,7 @@ function RugnuxCollectionPlots({s, height}: { s: rugnux_live_status, height: num
     }));
 
     return (
-        <Box sx={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1.5}}>
+        <Box sx={{display: "grid", gridTemplateColumns: {xs: "1fr", sm: "1fr 1fr"}, gap: 1.5}}>
             <Box sx={panelSx}>
                 {spots || bkg
                     ? <Plot style={{width: "100%", height}} config={config}
@@ -72,7 +78,7 @@ function RugnuxCollectionPlots({s, height}: { s: rugnux_live_status, height: num
                                 yaxis: {...axis, rangemode: "tozero", title: title("spots", pal.traces[0])},
                                 yaxis2: {overlaying: "y", side: "right", rangemode: "tozero", showgrid: false, tickfont: {size: size - 1},
                                     title: title("background", pal.traces[1])}}}/>
-                    : <Empty text="waiting for images"/>}
+                    : <Empty text={noPoints}/>}
             </Box>
             <Box sx={panelSx}>
                 {s.stills
diff --git a/frontend/src/components/RugnuxHero.tsx b/frontend/src/components/RugnuxHero.tsx
index 6c3d74a3e..009a985df 100644
--- a/frontend/src/components/RugnuxHero.tsx
+++ b/frontend/src/components/RugnuxHero.tsx
@@ -118,7 +118,8 @@ function ModelTile({s, modelLoaded}: { s: rugnux_live_status, modelLoaded: boole
     return <Tile value="—" caption="Model" tone="plain" tip="The run ended without placing the model - the steps and warnings say why."/>;
 }
 
-// column: the tiles as a rail, top to bottom, sharing the rail's height
+// column: the tiles as a rail, top to bottom, sharing the rail's height (two or three to a row on a phone,
+// where the rail is the width of the screen)
 function RugnuxHero({s, modelLoaded, column}: { s: rugnux_live_status, modelLoaded: boolean, column?: boolean }) {
     // the numbers are of a merge that exists: rotation - the run is over; serial - a provisional merge is in
     const merged = s.d_min !== undefined || (s.shells !== undefined && s.shells.length > 0);
@@ -133,7 +134,8 @@ function RugnuxHero({s, modelLoaded, column}: { s: rugnux_live_status, modelLoad
 
     return (
         <Box sx={{display: "grid", gap: 1, minHeight: 0, ...(column
-            ? {gridTemplateColumns: "1fr", gridAutoRows: "minmax(0, 1fr)", flexGrow: 1, "& > *": {display: "flex", flexDirection: "column", justifyContent: "center"}}
+            ? {gridTemplateColumns: {xs: "repeat(2, minmax(0, 1fr))", sm: "repeat(3, minmax(0, 1fr))", md: "1fr"}, gridAutoRows: {md: "minmax(0, 1fr)"}, flexGrow: 1,
+                "& > *": {display: "flex", flexDirection: "column", justifyContent: "center"}}
             : {gridTemplateColumns: {xs: "repeat(3, minmax(0, 1fr))", md: "repeat(9, minmax(0, 1fr))"}})}}>
             <Tile value={num(o.d_min, x => `${x.toFixed(2)} Å`)} caption="Resolution" tone={pending}
                   tip="High-resolution limit of the merge (d_min)."/>
diff --git a/frontend/src/components/RugnuxPage.tsx b/frontend/src/components/RugnuxPage.tsx
index 355deba74..38f9d1cef 100644
--- a/frontend/src/components/RugnuxPage.tsx
+++ b/frontend/src/components/RugnuxPage.tsx
@@ -1,4 +1,4 @@
-import {Alert, Box, Button, Collapse, Paper, Stack, Typography, useTheme} from "@mui/material";
+import {Alert, Box, Button, Collapse, Paper, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
 import {keyframes} from "@mui/system";
 import {useQuery} from "@tanstack/react-query";
 import {getConfigRugnuxOptions, getRugnuxStatusOptions} from "../client/@tanstack/react-query.gen";
@@ -47,7 +47,7 @@ function phase(s: rugnux_live_status, pal: LivePalette): { label: string, colour
         return lastImageTime(s) === undefined
             ? {label: "Collecting", colour: pal.collecting} : {label: "Processing", colour: pal.processing};
     if (s.state === "Done")
-        return s.verdict === "OK" ? {label: "Done", colour: pal.ok}
+        return s.verdict === "OK" || !s.verdict ? {label: "Done", colour: pal.ok}
             : s.verdict === "WARNINGS" ? {label: "Done · warnings", colour: pal.attention}
                 : {label: `Done · ${s.verdict.toLowerCase()}`, colour: pal.serious};
     if (s.state === "Failed")
@@ -173,6 +173,9 @@ const RAIL = "clamp(200px, 12vw, 420px)";
 
 function Dashboard({s, deadline_s, modelLoaded, measuring, pal}:
                        { s: rugnux_live_status, deadline_s: number, modelLoaded: boolean, measuring: boolean, pal: LivePalette }) {
+    // Only on the fixed-height stage (xl) do the plots take their height from their box; below it the
+    // stage flows and the boxes take their height from the plots, so a measured height would feed back.
+    const stage = useMediaQuery(useTheme().breakpoints.up("xl"));
     const [plotsRef, plotsHeight] = useHeight();
     const [stripRef, stripHeight] = useHeight();
     const later = s.stills ? "after the first merge" : "after the run";
@@ -196,11 +199,11 @@ function Dashboard({s, deadline_s, modelLoaded, measuring, pal}:
                     <Division sx={{flex: "0 1 auto", maxHeight: "40%", overflowY: "auto", "& > *": {flexShrink: 0}}}>
                         {s.triage && s.triage.length > 0 ? <RugnuxTriage items={s.triage}/> : <Later text={later}/>}
                     </Division>
-                    <Division sx={{flex: "1 1 0"}} label={<>By resolution{s.stills && s.shells_merge && ` · ${s.shells_merge}`}</>}>
-                        <Box ref={plotsRef} sx={{flexGrow: 1, minHeight: {xs: 400, xl: 0}, display: "flex"}}>
+                    <Division sx={{flex: {xs: "none", xl: "1 1 0"}}} label={<>By resolution{s.stills && s.shells_merge && ` · ${s.shells_merge}`}</>}>
+                        <Box ref={plotsRef} sx={{flexGrow: 1, minHeight: {xs: 200, xl: 0}, display: "flex"}}>
                             {s.shells && s.shells.length > 0
                                 ? <Box sx={{width: "100%"}}>
-                                    <RugnuxShellPlots shells={s.shells} height={Math.max(150, (plotsHeight - 16) / 2)}/>
+                                    <RugnuxShellPlots shells={s.shells} height={stage ? Math.max(150, (plotsHeight - 16) / 2) : 220}/>
                                   </Box>
                                 : <Later text={later}/>}
                         </Box>
@@ -208,7 +211,7 @@ function Dashboard({s, deadline_s, modelLoaded, measuring, pal}:
                 </Box>
                 <Division label="Collection" sx={{gridColumn: {md: "1 / 3", xl: "2 / 4"}, gridRow: {xl: 2}, ...hairline, minHeight: {xs: 200, xl: 0}}}>
                     <Box ref={stripRef} sx={{flexGrow: 1, minHeight: 0}}>
-                        <RugnuxCollectionPlots s={s} height={Math.max(130, stripHeight)}/>
+                        <RugnuxCollectionPlots s={s} height={stage ? Math.max(130, stripHeight) : 160}/>
                     </Box>
                 </Division>
             </Box>
diff --git a/frontend/src/components/RugnuxProgress.tsx b/frontend/src/components/RugnuxProgress.tsx
index 92a64e1f8..c9ca5bd82 100644
--- a/frontend/src/components/RugnuxProgress.tsx
+++ b/frontend/src/components/RugnuxProgress.tsx
@@ -124,8 +124,9 @@ function RugnuxProgress({s, deadline_s}: { s: rugnux_live_status, deadline_s: nu
             kinds.push({tag: tags[i], titles: [st.title], seconds: duration, open});
     });
 
+    // On a phone the details go under the bars, which take the whole width
     return (
-        <Box sx={{display: "grid", gridTemplateColumns: "72px minmax(0, 1fr) auto", columnGap: 2, alignItems: "start"}}>
+        <Box sx={{display: "grid", gridTemplateColumns: {xs: "72px minmax(0, 1fr)", sm: "72px minmax(0, 1fr) auto"}, columnGap: 2, alignItems: "start"}}>
             {/* captions */}
             <Box sx={{display: "grid", rowGap: `${GAP}px`}}>
                 <Typography sx={{...LABEL_SX, color: pal.collecting}}>Detector</Typography>
@@ -186,7 +187,7 @@ function RugnuxProgress({s, deadline_s}: { s: rugnux_live_status, deadline_s: nu
             </Box>
 
             {/* details */}
-            <Box sx={{display: "grid", rowGap: `${GAP}px`, textAlign: "right"}}>
+            <Box sx={{display: "grid", rowGap: `${GAP}px`, textAlign: "right", gridColumn: {xs: "1 / 3", sm: "auto"}}}>
                 <Typography noWrap sx={{fontSize: "0.85rem", lineHeight: `${BAR}px`, color: "text.secondary", fontVariantNumeric: "tabular-nums"}}>
                     {detectorDetail}
                 </Typography>
@@ -197,7 +198,7 @@ function RugnuxProgress({s, deadline_s}: { s: rugnux_live_status, deadline_s: nu
 
             {/* the kinds of step, each with its time */}
             {kinds.length > 0 &&
-                <Box sx={{gridColumn: "2 / 4", display: "flex", flexWrap: "wrap", gap: 0.75, mt: 0.25}}>
+                <Box sx={{gridColumn: {xs: "1 / 3", sm: "2 / 4"}, display: "flex", flexWrap: "wrap", gap: 0.75, mt: 0.25}}>
                     {kinds.map((k, i) => (
                         <Tooltip key={i} arrow title={k.titles.join(" · ")}>
                             <Box sx={{display: "inline-flex", alignItems: "center", gap: 0.75, px: 1, height: 22, borderRadius: "11px",
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index d3d7ad4fb..eb22d7307 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -5,12 +5,15 @@ import { SxProps, Theme } from "@mui/material/styles";
 import { SystemStyleObject } from "@mui/system";
 import { TypographyProps } from "@mui/material/Typography";
 import { UploadSnackbar } from "./useUpload";
+import { drawerColours } from "../theme";
 
 /** The panel title row: a light-blue (sidebar) band with a lime left accent, echoing
- *  the selected sidebar entry so the cards feel part of the same system. Exported so
+ *  the selected sidebar entry so the cards feel part of the same system; at night the
+ *  selected entry's indigo tint, which the light text reads on. Exported so
  *  DetectorSettings (which doesn't use SettingsPanel) can match. */
 export const panelHeaderSx = {
-    px: 3, py: 1.75, bgcolor: indigo[50], borderLeft: "4px solid", borderColor: "secondary.main",
+    px: 3, py: 1.75, borderLeft: "4px solid", borderColor: "secondary.main",
+    bgcolor: (t: Theme) => t.palette.mode === "dark" ? drawerColours("dark").selected : indigo[50],
 };
 
 /** Uniform look for the inline <b> section labels used inside the config panels:
diff --git a/frontend/src/components/StatusBar.tsx b/frontend/src/components/StatusBar.tsx
index 1c888cec9..a231f5a6d 100644
--- a/frontend/src/components/StatusBar.tsx
+++ b/frontend/src/components/StatusBar.tsx
@@ -132,6 +132,18 @@ function TokenButton() {
     </>;
 }
 
+// On a phone the three action buttons do not fit beside the status pill: they get a second, dense row of
+// the bar, and the wordmark goes. The spacer below reserves the bar's height for the page.
+const phoneRow = {xs: "flex", sm: "none"} as const;
+const desktopRow = {xs: "none", sm: "flex"} as const;
+
+export function StatusBarSpacer() {
+    return <>
+        <Toolbar/>
+        <Toolbar variant="dense" sx={{display: phoneRow}}/>
+    </>;
+}
+
 function StatusBar({s, onMenuClick, mode, onModeClick}: MyProps) {
     // Pick each button's tier from the current state, so the one action that makes
     // sense right now is lime and the rest recede.
@@ -142,6 +154,27 @@ function StatusBar({s, onMenuClick, mode, onModeClick}: MyProps) {
         : (st === 'Idle') ? 'active' : 'off';
     const pedestalActive = st === 'Idle';
 
+    const actions = (
+        <Stack direction="row" spacing={1}>
+            <ButtonWithSnackbar
+                text={"Cancel"}
+                path={"/cancel"}
+                {...TIER[cancelTier]}
+            />
+            <ButtonWithSnackbar
+                text={"Calibrate"}
+                path={"/pedestal"}
+                disabled={!pedestalActive}
+                {...(pedestalActive ? TIER.active : TIER.off)}
+            />
+            <ButtonWithSnackbar
+                text={"Initialize"}
+                path={"/initialize"}
+                {...TIER[initTier]}
+            />
+        </Stack>
+    );
+
     return <AppBar sx={{zIndex: (theme) => theme.zIndex.drawer + 1}}>
         <Toolbar>
             {onMenuClick && (
@@ -150,7 +183,7 @@ function StatusBar({s, onMenuClick, mode, onModeClick}: MyProps) {
                 </IconButton>
             )}
             <Typography variant="h6" component="div" noWrap
-                        sx={{flexGrow: 0.5, fontWeight: 500, letterSpacing: '.02em'}}>
+                        sx={{flexGrow: 0.5, fontWeight: 500, letterSpacing: '.02em', display: {xs: 'none', sm: 'block'}}}>
                 Jungfraujoch
             </Typography>
 
@@ -167,25 +200,9 @@ function StatusBar({s, onMenuClick, mode, onModeClick}: MyProps) {
                 </Tooltip>
             )}
             <TokenButton/>
-            <Stack direction="row" spacing={1} sx={{ml: 1}}>
-                <ButtonWithSnackbar
-                    text={"Cancel"}
-                    path={"/cancel"}
-                    {...TIER[cancelTier]}
-                />
-                <ButtonWithSnackbar
-                    text={"Calibrate"}
-                    path={"/pedestal"}
-                    disabled={!pedestalActive}
-                    {...(pedestalActive ? TIER.active : TIER.off)}
-                />
-                <ButtonWithSnackbar
-                    text={"Initialize"}
-                    path={"/initialize"}
-                    {...TIER[initTier]}
-                />
-            </Stack>
+            <Box sx={{ml: 1, display: desktopRow}}>{actions}</Box>
         </Toolbar>
+        <Toolbar variant="dense" sx={{display: phoneRow, justifyContent: 'center', pb: 0.5}}>{actions}</Toolbar>
     </AppBar>
 }