fix(notices): keep the promise box whole when the note has to scroll

On a 1080p screen at 100% the release notice's right column runs out of
height. The column scrolls, but the promise box is a flex item with
overflow hidden, so it may shrink to nothing and was pressed down to its
label while the paragraphs around it kept their height. Everything inside
the two scrolling columns now keeps its size.

Below 1080px the halves stack and the panel scrolls; the single minmax row
that keeps the two-column layout inside the panel starved the release half
to zero height there. The rows go back to auto, and the ask sticks to the
bottom edge once the note is in view.

client/src/components/SystemNotices/releaseNotice.css

@@ -67,9 +67,20 @@
   line-height: normal;
 }
 
-/* Below the two-column breakpoint the halves stack and the panel scrolls. */
+/* Below the two-column breakpoint the halves stack and the panel scrolls. The
+   rows must go back to auto: with the single minmax row from above, the note took
+   the whole panel and the release half was left with nothing but its padding. */
 @media (max-width: 1080px) {
-  .rn-panel { grid-template-columns: 1fr; overflow-y: auto; }
+  .rn-panel { grid-template-columns: 1fr; grid-template-rows: auto; overflow-y: auto; }
+  .rn-release, .rn-release-inner, .rn-note-body { overflow: visible; }
+  /* Once the note has scrolled into view, the ask stays at the bottom edge. The
+     band's usual tint is translucent, so it gets a solid one here. */
+  .rn-support {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    background: color-mix(in srgb, var(--bg-card) 95%, var(--text-primary));
+  }
 }
 
 [data-reduce-motion='true'] .rn-overlay,
@@ -581,6 +592,15 @@
 
 .rn-note-body::-webkit-scrollbar { display: none; }
 
+/*
+ * The two columns scroll; what is inside them must not give way instead. A flex
+ * item may shrink below its content, and one with overflow hidden may shrink to
+ * nothing, so on a 1080p screen at 100% the promise box was pressed down to its
+ * label while the paragraphs around it kept their height and the column scrolled.
+ */
+.rn-release-inner > *,
+.rn-note-body > * { flex-shrink: 0; }
+
 .rn-note-eyebrow {
   font-family: var(--font-subtext);
   font-size: 11px;

client/src/components/SystemNotices/releaseNoticeCss.test.ts

@@ -36,4 +36,15 @@ describe('release notice css', () => {
     expect(step('--z-notice')).toBeGreaterThan(step('--z-nav'))
     expect(step('--z-notice')).toBeGreaterThan(61)
   })
+
+  it('FE-COMP-RELEASENOTICECSS-003: what the columns hold keeps its height, the columns scroll', () => {
+    // A flex item with overflow hidden may shrink to nothing. The promise box is
+    // one, and on a 1080p screen at 100% it was pressed down to its label while
+    // the column around it scrolled. jsdom lays nothing out, so the rule itself
+    // is the assertion.
+    const columns = block('.rn-release-inner > *,')
+    expect(columns).toMatch(/\.rn-note-body > \*/)
+    expect(columns).toMatch(/flex-shrink:\s*0/)
+    expect(block('.rn-promise {')).toMatch(/overflow:\s*hidden/)
+  })
 })