From f193a22b0f35ab76c4a4e29be6d4e7c13fc80a4f Mon Sep 17 00:00:00 2001 From: onatozmenn Date: Fri, 31 Jul 2026 17:16:35 +0300 Subject: [PATCH] Fit the playground in the window Editing a program and reading what the compiler said about it are one task, and scrolling between the two panes made it two. The page is a column now, the panes take whatever height is left, and each scrolls inside itself. Only where there is room: below 52rem the panes stack and below 40rem tall there is nothing to fit, so both keep scrolling the page, because a 26rem editor squeezed into 300 pixels is worse than a scrollbar. An example's summary is however long its author wanted it, so it gets two lines and its own scrollbar rather than a share of the editor's. Measured at 1920x1080, 1280x800, 1280x700 and 840x660: nothing scrolls the page, nothing scrolls sideways, and the editor gets 704, 424, 324 and 284 pixels. Checked with `proven`, whose check output is 1,738 pixels of diagnostics, and it stays inside the output pane. Co-authored-by: GitHub Copilot --- assets/style.css | 79 ++++++++++++++++++++++++++++++++++++++++++++++++ play/index.html | 2 +- 2 files changed, 80 insertions(+), 1 deletion(-) diff --git a/assets/style.css b/assets/style.css index 74c28e0..e789553 100644 --- a/assets/style.css +++ b/assets/style.css @@ -294,6 +294,85 @@ textarea#source { margin: 0 0 1rem; } +/* The playground in one screen. + Only where there is room for it: on a phone, or a short window, scrolling + is the right answer and a 26rem editor squeezed into 300 pixels is not. */ +@media (min-width: 52rem) and (min-height: 40rem) { + body.fits { + height: 100dvh; + overflow: hidden; + } + + body.fits .wrap { + height: 100%; + display: flex; + flex-direction: column; + padding-bottom: 1rem; + } + + body.fits main { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + } + + body.fits header.site { + padding-bottom: 0.5rem; + margin-bottom: 0.75rem; + } + + body.fits h1 { + font-size: 1.3rem; + } + + body.fits .lede, + body.fits .status, + body.fits .picker, + body.fits .verbs { + margin-bottom: 0.5rem; + } + + /* Reading width costs a line here, and the line is the editor's. */ + body.fits main .lede { + max-width: none; + } + + /* An example's own comment is however long its author wanted it. */ + body.fits .summary { + margin-bottom: 0.5rem; + max-height: 2.9em; + overflow-y: auto; + } + + body.fits .summary:empty { + display: none; + } + + body.fits .panes { + flex: 1; + min-height: 0; + } + + body.fits textarea#source, + body.fits #output { + height: 100%; + min-height: 0; + resize: none; + overflow: auto; + } + + body.fits footer.site { + margin-top: 1rem; + padding-top: 0.5rem; + font-size: 0.8rem; + } + + body.fits footer.site p { + margin: 0.25rem 0; + } +} + /* Present to a screen reader, absent to everyone else. */ .visually-hidden { position: absolute; diff --git a/play/index.html b/play/index.html index 7f8497a..47fc23b 100644 --- a/play/index.html +++ b/play/index.html @@ -10,7 +10,7 @@ /> - +
Deed