prreviewbuddy 0.86.6 → 0.87.2

package/static/shell.css

@@ -470,10 +470,20 @@ body > * { flex: 0 0 auto; }
 .prb-shell {
   display: grid;
   grid-template-columns: var(--rail-width) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   flex: 1 1 0;
   min-height: 0;
 }
 .prb-shell > * { min-height: 0; }
+/* The application shell is the strip and the rail, and the rail starts directly under the strip on
+   every page. What a page says about itself (its context bar, or a review's bar and banners) sits at
+   the top of the content column beside the rail, so however tall it is it moves only that column.
+   Placed by grid line, never by an offset: the rail spans both rows, the bar takes the first row of
+   the last column and the content the second, so the same rules hold when the narrow layout drops
+   the rail and the shell is one column. */
+.prb-shell > .prb-rail { grid-column: 1; grid-row: 1 / -1; }
+.prb-shell > .prb-context { grid-column: -2; grid-row: 1; }
+.prb-shell > main { grid-column: -2; grid-row: 2; }
 
 /* ── The strip's controls ──
    Notifications, Settings and Stop server, as icons, in the corner they are reached for from. Icon
@@ -605,6 +615,27 @@ body[data-restarting] .prb-body { opacity: 0.55; pointer-events: none; }
 .prb-strip-action:hover .prb-unread-dot,
 .prb-strip-action[aria-current="true"] .prb-unread-dot { border-color: var(--surface-2); }
 .prb-unread-dot[hidden] { display: none; }
+/* The count beside Runs, on the strip's Runs icon: a digit where the bell has a dot, because how
+   much is running is the useful part, and capped at 9+ so it stays the size of the corner. */
+.prb-strip-count {
+  position: absolute;
+  top: -1px;
+  right: -3px;
+  min-width: 15px;
+  padding: 0 4px;
+  border: 2px solid var(--bg);
+  border-radius: 999px;
+  background: var(--wordmark-accent);
+  color: var(--bg);
+  font-size: var(--t-pill);
+  font-weight: 700;
+  line-height: 11px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.prb-strip-action:hover .prb-strip-count,
+.prb-strip-action[aria-current="true"] .prb-strip-count { border-color: var(--surface-2); }
+.prb-strip-count[hidden] { display: none; }
 
 /* Said, never shown. The bell carries the count twice: the digit above, capped at 9+, and this,
    which is the whole number in words. A screen reader hears one bell that knows how many. */
@@ -623,47 +654,39 @@ body[data-restarting] .prb-body { opacity: 0.55; pointer-events: none; }
 
 /* ── The context bar ──
    What page this is, and the controls belonging to it: the dominant bar on a page that is not a
-   review, exactly as `.prb-review-bar` is on one. It wraps rather than clips, because what it holds
-   is a row of controls and not a single ref that must stay on one line. */
+   review, exactly as `.prb-review-bar` is on one. Two regions, one border: the title row, the same
+   height on every page and the same height as the review bar, and beneath it the controls row of a
+   page that has controls. So the title sits at the same place on every page and only the presence
+   of controls changes how tall the bar is. It does not scroll because nothing it is in scrolls:
+   `main`, the row below it in the shell, is the scroller. */
 .prb-context {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px 16px;
   flex: none;
-  min-height: var(--header-height);
-  padding: 10px 20px;
   background: var(--surface);
   border-bottom: 1px solid var(--border);
 }
+/* Title at the workspace's left edge on every page, never in the list's centred column: it names the
+   page, and the page is the whole column. Actions (Mark all read) take the right of the row. A fixed
+   height, not a minimum, so a row of actions can never make one page's title row taller. */
+.prb-context-primary {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  box-sizing: border-box;
+  height: var(--header-height);
+  padding: 0 20px;
+  container-type: inline-size;
+}
 .prb-context .prb-page-title { margin: 0; }
+/* The reviews and runs toolbars sit over the list they govern, so this row takes the list's own
+   gutters (`.prb-shell > .prb-index`) and the search's edges are the cards' edges at every width. */
+.prb-context-secondary {
+  --list-gutter: max(24px, calc((100% - 960px) / 2 + 24px));
+  padding: 12px var(--list-gutter);
+  border-top: 1px solid var(--border);
+}
 /* The controls came up from the top of the page's own column, so the margins that spaced them from
    the content below them belong to that column, not to this bar. */
-.prb-context .prb-index-controls,
-.prb-context .prb-settings-back { margin-bottom: 0; }
-/* The reviews toolbar shares the list's column rather than the window's right edge.
-   The bar is full-bleed and the list is a 960px column centred in the space beside the rail, so
-   right-aligning the controls put them over nothing they govern: the search began past the middle
-   of the page while the cards below started far to its left. Centring them in the space the title
-   leaves is not the same thing either -- the title eats the left side, the rail shifts the column
-   right, and the group lands short of the list by half the rail.
-   So the title is given the rail's own width and the group the column's, from the same two numbers
-   the layout below already uses. The search spans the column, so its edges are the cards' edges
-   at every width wide enough to have a rail. */
-/* Scoped with :has() and not by a body class: all three workspace pages share `prb-index-body`,
-   and only this bar holds the list's controls. */
-.prb-context:has(.prb-index-controls) { padding-left: 0; padding-right: 0; column-gap: 0; }
-.prb-context:has(.prb-index-controls) .prb-page-title { flex: none; box-sizing: border-box; width: var(--rail-width); padding-left: 20px; }
-.prb-context .prb-index-controls {
-  flex: 1 1 320px;
-  box-sizing: border-box;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-/* Two rows: the search on its own, the filters below it. Search is how a reviewer finds a review and
-   the filters refine what it found, so the search takes the column's whole width rather than
-   competing with three dropdowns for it, and the filters sit together under its left edge. */
+.prb-context .prb-index-controls { margin-bottom: 0; }
 .prb-context .prb-index-search { flex: 1 1 100%; padding: 6px 10px; font-size: var(--t-meta); }
 .prb-context-controls {
   display: flex;
@@ -671,6 +694,22 @@ body[data-restarting] .prb-body { opacity: 0.55; pointer-events: none; }
   gap: 12px;
   margin-left: auto;
 }
+.prb-context-controls .prb-index-select { flex: none; }
+/* Where the title row cannot hold the title, the unread line and Mark all read, the line goes and
+   the button stays: the button is the action, and the line says what the dot on the bell already
+   says. 270px is where "Nothing unread", the longest the line gets, stops fitting (a window under
+   about 310px). Visually hidden rather than removed, because it is the live region a screen reader
+   hears. */
+@container (max-width: 270px) {
+  .prb-context-controls .prb-index-count {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}
 
 /* ── Stop-server dialog ── */
 .prb-dialog {
@@ -938,10 +977,11 @@ a.prb-author:hover .prb-author-name { color: var(--text-primary); }
 
 /* ── Three-pane body ── */
 .prb-body {
-  /* Positioned, for Buddy AI's edge tab, which hangs off this box's right edge at its top. */
+  /* Positioned, for the assistant's overlay at narrow widths. */
   position: relative;
   display: grid;
   grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--ask-width);
+  grid-template-rows: auto minmax(0, 1fr);
   /* Whatever the banners above did not take, and `0` rather than `auto` as the basis: the height
      comes from the space left over, never from the content. With `auto` the browser measures the
      panes first, which is how a pane full of findings ends up deciding how tall the shell is. */
@@ -957,6 +997,19 @@ a.prb-author:hover .prb-author-name { color: var(--text-primary); }
  * `min-height: auto` on a grid item made every pane as tall as its content and the whole page went
  * rigid. `.prb-ask` already carried its own copy of this line, which was the clue. */
 .prb-body > * { min-height: 0; }
+/* The review's header (its bar and banners) is the first row of the columns right of the rail, as a
+   workspace page's context bar is (see `.prb-shell`): it spans the document and the assistant, and
+   pushes down only them. The rail spans both rows from directly under the strip. The panes take the
+   second row and are placed into its columns in order. Where the rail is not drawn (focus mode, the
+   narrow layout) the body is one column and the header spans it. */
+.prb-body > .prb-review-head { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
+.prb-body > .prb-rail { grid-column: 1; grid-row: 1 / -1; }
+.prb-body > .prb-doc,
+.prb-body > .prb-ask { grid-row: 2; }
+/* Buddy AI's edge tab and, at narrow widths, the assistant's overlay are positioned against the
+   panes' row rather than the whole body, so neither covers the header. An absolutely positioned
+   grid child takes the area its lines name as its containing block. */
+.prb-body > .prb-ask-tab { grid-row: 2; grid-column: 1 / -1; }
 /* No `data-ask` means "whatever fits" — wide viewports show the assistant, narrow ones do not.
    The attribute appears only once the reviewer states a preference, and from then on it wins. */
 .prb-body[data-ask='closed'] { grid-template-columns: var(--rail-width) minmax(0, 1fr) 0; }
@@ -974,8 +1027,32 @@ a.prb-author:hover .prb-author-name { color: var(--text-primary); }
   overflow-y: auto;
   padding: 18px 0 18px;
 }
-/* Everything that is not this review sits at the bottom, out of the reading path. */
+/* Three parts, in one order on every page: the places, this review's section (review pages only),
+   the foot. The places and the foot keep their size; the section takes what is left and scrolls on
+   its own, so a long review path never pushes Runs or Collapse sidebar out of the window. The rail
+   still scrolls as a whole if the places and the foot alone are taller than it. */
+.prb-rail-places,
+.prb-rail-foot { flex: none; }
 .prb-rail-foot { margin-top: auto; }
+.prb-rail-context {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.prb-rail-places + .prb-rail-context { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
+/* The foot is anchored to the bottom by its auto margin, whatever is above it and however short.
+   The rule between groups sets a fixed margin and is more specific than `.prb-rail-foot`, so it had
+   been winning and leaving the foot wherever the rows above it ended. The gap it kept is now the
+   least space above the foot, held by whatever precedes it, which an auto margin cannot hold. */
+.prb-rail > .prb-rail-group.prb-rail-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
+.prb-rail > :has(+ .prb-rail-foot) { margin-bottom: 22px; }
+/* The page with no places (the offline preview) starts with the section, with nothing to rule off. */
+.prb-rail-context-title { margin: 0; }
+/* KISS, the section's last group, is set apart by space alone: it belongs to this review as much as
+   the rows above it, and a rule would say it did not. The same in every state, so sliding a Compact
+   sidebar out does not move it. */
+.prb-rail-context > .prb-rail-group { margin-top: 12px; }
 a.prb-rail-item { text-decoration: none; }
 .prb-rail-item:disabled { opacity: 0.6; cursor: default; }
 /* Operational, and it ends every open review rather than this one. It stays quiet — the
@@ -1142,15 +1219,25 @@ a.prb-rail-item { text-decoration: none; }
 }
 :root[data-sidebar-compact][data-sidebar-peek] .prb-rail {
   width: var(--rail-full-width);
+  overflow-x: hidden;
   box-shadow: 8px 0 24px var(--shadow-float);
 }
+/* The rows are laid out at the width they will end at from the first frame, inside the rail's one
+   pixel of border, so the growing edge only uncovers them. Laid out at the passing width instead,
+   "Review path" and "PR context" wrapped to two lines part-way and every row below dropped. */
+:root[data-sidebar-compact][data-sidebar-peek] .prb-rail > * { width: calc(var(--rail-full-width) - 1px); }
 
-/* Compact: every row is its icon, named in a tooltip beside it on hover and keyboard focus. The
-   tooltip is the row's own label, moved out to the right, so the name a screen reader hears is
-   the one it always heard. What has no icon (headings, the numbered review path, the folds, the
-   counts) waits for Expanded. The rail lets the tooltips out past its edge, and sits above the
-   pane beside it so they draw over it. */
+/* Compact: every row is its icon. What has no icon (headings, the numbered review path, the folds,
+   most counts) waits for the sidebar to slide out, which resting the pointer on it or tabbing into
+   it does at once, so a row's name is never shown any other way. It is still the row's name for a
+   screen reader: the label stays in the row, only undrawn. Neither the rail nor its section
+   scrolls in the 56px strip, where a scrollbar would take a third of it. */
 :root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail { overflow: visible; }
+/* The section keeps the height it has when slid out, so the foot stays on screen however short the
+   window and no row moves when the sidebar slides out. It clips vertically only, which `clip` can do
+   and `hidden` cannot, so the corner marks are never cut at its side, and rows past its end are
+   reached by sliding the sidebar out (pointer or Tab), where it scrolls. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-context { overflow-x: visible; overflow-y: clip; }
 :root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item {
   position: relative;
   justify-content: center;
@@ -1159,66 +1246,81 @@ a.prb-rail-item { text-decoration: none; }
   padding: 9px 0;
   border-left-width: 0;
 }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item .prb-rail-label {
+/* Undrawn, not removed: the label is still the row's name, and New review's. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item .prb-rail-label,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review-label {
   position: absolute;
-  top: 50%;
-  left: calc(100% + 6px);
-  transform: translateY(-50%);
-  padding: 5px 8px;
-  border-radius: 6px;
-  background: var(--text-primary);
-  color: var(--bg);
-  font-size: var(--t-micro);
-  font-weight: 500;
-  line-height: 1.4;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
   white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  z-index: 1;
 }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item .prb-rail-label * { color: inherit; font: inherit; }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item:hover .prb-rail-label,
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item:focus-visible .prb-rail-label { opacity: 1; transition: opacity 0.1s 0.35s; }
 :root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-count,
 :root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-selected,
 :root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-twisty,
 :root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-heading,
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-subhead,
 :root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-path { display: none; }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-body { margin: 0; border-left: 0; }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-body .prb-rail-item { padding-left: 0; }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-group + .prb-rail-group { margin-top: 12px; padding-top: 12px; }
-/* New review is the square + at the top, its name and shortcut in the strip's own tooltip. */
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-new { padding: 0 10px 10px; }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review { position: relative; justify-content: center; width: 36px; padding: 0; }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review-label,
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review-key { display: none; }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]::after {
-  content: attr(data-tip);
+/* The Review path row keeps its height, undrawn, so the icons under it are already where the
+   expanded rows will be and sliding out moves nothing up or down. Hidden this way it is out of the
+   tab order and the accessibility tree, as `display: none` had it; tabbing into the rail peeks it,
+   which draws the row again before focus can reach it. One line, clipped: wrapped in the narrow
+   strip it would be a line taller than the row it stands in for. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-subhead { visibility: hidden; overflow: hidden; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-subhead .prb-rail-heading { display: block; white-space: nowrap; }
+/* The section's heading keeps its height undrawn for the same reason, so the review's icons are
+   already where they will be when the sidebar slides out. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-heading.prb-rail-context-title { display: block; visibility: hidden; overflow: hidden; white-space: nowrap; }
+/* The count beside Runs is the one count Compact keeps, as a mark on the icon's corner: work going
+   on is the thing a reader with the sidebar folded most needs to see. Unread has the bell's dot. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-count.prb-rail-running:not([hidden]) {
+  display: block;
   position: absolute;
-  top: 50%;
-  left: calc(100% + 6px);
-  transform: translateY(-50%);
-  padding: 5px 8px;
-  border-radius: 6px;
-  background: var(--text-primary);
+  top: 3px;
+  left: calc(50% + 2px);
+  min-width: 15px;
+  padding: 0 4px;
+  border: 2px solid var(--bg);
+  border-radius: 999px;
+  background: var(--wordmark-accent);
   color: var(--bg);
-  font-size: var(--t-micro);
-  font-weight: 500;
-  line-height: 1.4;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  z-index: 1;
+  font-size: var(--t-pill);
+  line-height: 11px;
+  text-align: center;
 }
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]:hover::after,
-:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]:focus-visible::after { opacity: 1; transition: opacity 0.1s 0.35s; }
+/* Issues and Questions keep their indicator too, on the same corner as Runs, but quiet: what is
+   left is a fact about the review, not an alert. The same element as Expanded, so the figure, the
+   zero and the tick are whatever the expanded row says. Absolute, so no icon or row moves. The ring
+   is the row's own background, so it separates the mark from the icon on every row state. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) :is([data-view-nav='issues'], [data-view-nav='questions']) .prb-rail-count {
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: calc(50% + 1px);
+  min-width: 13px;
+  padding: 0 2px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  box-shadow: 0 0 0 1px var(--rail-mark-ring, var(--bg));
+  color: var(--text-secondary);
+  font-size: var(--t-pill);
+  font-weight: 600;
+  line-height: 13px;
+  text-align: center;
+}
+:root[data-sidebar-compact]:not([data-sidebar-peek]) :is([data-view-nav='issues'], [data-view-nav='questions']) .prb-rail-count-done { color: var(--success); font-weight: 700; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item:hover { --rail-mark-ring: var(--surface-hover); }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item[aria-current='true'] { --rail-mark-ring: var(--brand-muted); }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-body { margin-left: 0; border-left: 0; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-body .prb-rail-item { padding-left: 0; }
+/* New review is the square + at the top; sliding out shows its name and shortcut beside it. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-new { padding: 0 10px 10px; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review { justify-content: center; width: 36px; padding: 0; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review-key { display: none; }
 
 /* Hidden: the strip's square New review stands in, as it does whenever the rail is not drawn. Send
    feedback belongs to the sidebar and goes with it; the strip has no copy of it at any width. */
 :root[data-sidebar-hidden] .prb-strip .prb-strip-new-review { display: flex; }
-/* The page title is set in the rail's column, so it keeps its own width while that column narrows. */
-:root:is([data-sidebar-compact], [data-sidebar-hidden]) .prb-context:has(.prb-index-controls) .prb-page-title { width: auto; }
 /* The pages under a review type (Issues, Questions, Files, PR context) and the links at the foot
    share the group rows' white, so the grey themes in the review path read as their own list.
    Weight still separates these from the group rows above them. Must come after `.prb-rail-item`:
@@ -2933,6 +3035,7 @@ a.prb-guide-pick { text-decoration: none; }
   .prb-body:not([data-ask='open']),
   .prb-body[data-ask='open'] { grid-template-columns: minmax(0, 1fr); }
   .prb-rail { display: none; }
+  .prb-body > .prb-review-head { grid-column: 1 / -1; }
   .prb-strip .prb-strip-new-review { display: flex; }
   /* No sidebar fits at this width, so Show sidebar would bring back nothing. */
   :root[data-sidebar-hidden] .prb-strip .prb-sidebar-restore { display: none; }
@@ -2951,11 +3054,6 @@ a.prb-guide-pick { text-decoration: none; }
     width: min(var(--ask-width), 100%);
   }
   .pr-helper-sidebar.prb-pane { padding: 20px 18px 48px; }
-  /* No rail here, so there is no column beside it for the toolbar to share: the bar goes back to a
-     title and a row of controls, each taking the width it needs. */
-  .prb-context:has(.prb-index-controls) { padding-left: 20px; padding-right: 20px; column-gap: 16px; }
-  .prb-context:has(.prb-index-controls) .prb-page-title { width: auto; padding-left: 0; }
-  .prb-context .prb-index-controls { max-width: none; padding: 0; }
 }
 
 /* Phone width. Both bars were one fixed-height row of things that could not shrink, so below about
@@ -5543,21 +5641,6 @@ span.prb-arch-location:hover { text-decoration: none; }
    ground the rail and header have. It reuses `.prb-index` for the column and `.prb-field` for the
    controls; what is here is only the vertical rhythm of stacked sections and the two things a form
    has that no other page in this product has, a save and something to say about it. */
-/* The way out, where a way out goes: top left of the content, above the first section, rather than
-   among the version and the feedback link where it reads as chrome. The caret is the same one the
-   rail uses for "All reviews", so the two say the same thing in the same shape. */
-.prb-settings-back {
-  display: inline-block;
-  margin-bottom: 14px;
-  padding: 5px 10px 5px 8px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text-secondary);
-  font-size: var(--t-meta);
-  text-decoration: none;
-}
-.prb-settings-back:hover { color: var(--text-primary); border-color: var(--border-strong); }
-.prb-settings-back:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
 .prb-settings-section {
   padding: 20px 0;
   border-bottom: 1px solid var(--border);
@@ -5854,7 +5937,8 @@ select.prb-addreview-control {
 
 /* ── Notifications ── */
 
-.prb-rail-unread { color: var(--wordmark-accent); font-weight: 700; }
+.prb-rail-unread,
+.prb-rail-running { color: var(--wordmark-accent); font-weight: 700; }
 
 .prb-notifications {
   list-style: none;
@@ -6001,6 +6085,7 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
    and without depending on this block staying last. */
 body .prb-body[data-focus] { grid-template-columns: minmax(0, 1fr); }
 body .prb-body[data-focus] .prb-rail { display: none; }
+body .prb-body[data-focus] > .prb-review-head { grid-column: 1 / -1; }
 /* The rail's New review goes with it, so the strip's square one stands in, as below 860px. */
 body:has(.prb-body[data-focus]) .prb-strip .prb-strip-new-review { display: flex; }
 /* Focus is left from the pane it expanded, so Show sidebar would bring back nothing here. */