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

web: quick-gen result scales + wraps on small screens

Browse Source 
The result password was a fixed 19px with white-space:pre, so it overflowed the
card on phones. Scope .result .secret to a dynamic font (clamp 13-19px, ~15px at
390px) that wraps (pre-wrap + overflow-wrap:anywhere + min-width:0). Desktop is
unchanged (fits one line at 19px); the console gen-table keeps its pre alignment.
This commit is contained in:
Oleksandr Kozachuk
2026-06-08 22:12:53 +02:00
parent 509a66a609
commit be2078779d
1 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
helwasm/style.css
+4
View File
@@ -181,6 +181,10 @@ input.mask { -webkit-text-security: disc; }
.result .tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } .result .tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.result .actions { margin-left: auto; display: flex; gap: 8px; } .result .actions { margin-left: auto; display: flex; gap: 8px; }
.result .len { font-family: var(--mono); font-size: 11px; color: var(--muted); } .result .len { font-family: var(--mono); font-size: 11px; color: var(--muted); }
/* Quick-gen result: dynamic font (scales down on narrow phones) and wraps so a
long password stays inside the card. min-width:0 lets it shrink/wrap within
the flex row. Scoped so the console table keeps its fixed-width alignment. */
.result .secret { font-size: clamp(13px, 4vw, 19px); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
/* Secret rendering: real text in the DOM, visually masked. Click toggles. /* Secret rendering: real text in the DOM, visually masked. Click toggles.
Mask via -webkit-text-security on the MONO font so each disc keeps the mono Mask via -webkit-text-security on the MONO font so each disc keeps the mono