kaizenkodo/HEL
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: fix mobile horizontal overflow

Browse Source 
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.
This commit is contained in:
Oleksandr Kozachuk
2026-06-08 21:41:35 +02:00
parent 349bbe1557
commit 14d404744c
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
helwasm/style.css
+3 -1
View File
@@ -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 <details>) */
.about { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }