k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-18 21:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2408 from liketrek/fix/431-collection

Browse Source 
fix(notices): keep the promise box whole when the release notice has to scroll
This commit is contained in:
Maurice
2026-09-20 16:56:10 +02:00
committed by GitHub
parent b98787f836 32f2488774
commit 979a9283cd
2 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/SystemNotices/releaseNotice.css
+22 -2
View File
@@ -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
+11
View File
@@ -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/)
})
})