From 14d404744c06bab4c72ff4ba1188cbb717fbe361 Mon Sep 17 00:00:00 2001 From: Oleksandr Kozachuk <201152+ok2@users.noreply.github.com> Date: Mon, 8 Jun 2026 21:41:35 +0200 Subject: [PATCH] web: fix mobile horizontal overflow main is a grid; its items default to min-width:auto, so the console card (pre / no-wrap lines) refused to shrink and pushed the whole page wider than the phone screen, clipping the About panel text. Set grid-template-columns: minmax(0,1fr) so cards shrink to the viewport and the console scrolls internally instead. --- helwasm/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/helwasm/style.css b/helwasm/style.css index 325ab5e..0e03419 100644 --- a/helwasm/style.css +++ b/helwasm/style.css @@ -78,7 +78,9 @@ body { background: var(--seal); box-shadow: 0 0 0 3px rgba(226, 59, 46, 0.16); } -main { padding: clamp(20px, 3vw, 34px) 0 56px; display: grid; gap: clamp(16px, 2.4vw, 24px); } +/* minmax(0,1fr) lets the cards shrink below their content's intrinsic width, so + the console's pre/no-wrap lines scroll inside it instead of widening the page. */ +main { padding: clamp(20px, 3vw, 34px) 0 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 24px); } /* About / how-it-works (collapsible
) */ .about { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }