From 32f24887742751b20d459a7dc28dd994cd5cd474 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 20 Sep 2026 16:48:31 +0200
Subject: [PATCH] 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.
---
 .../SystemNotices/releaseNotice.css           | 24 +++++++++++++++++--
 .../SystemNotices/releaseNoticeCss.test.ts    | 11 +++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/client/src/components/SystemNotices/releaseNotice.css b/client/src/components/SystemNotices/releaseNotice.css
index ba4c39d6c..153af5f09 100644
--- a/client/src/components/SystemNotices/releaseNotice.css
+++ b/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;
diff --git a/client/src/components/SystemNotices/releaseNoticeCss.test.ts b/client/src/components/SystemNotices/releaseNoticeCss.test.ts
index 19196a18b..baf33780d 100644
--- a/client/src/components/SystemNotices/releaseNoticeCss.test.ts
+++ b/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/)
+  })
 })