diff options
| author | WebX11 SysOp <darkmotox11@gmail.com> | 2026-11-05 20:54:29 +0100 |
|---|---|---|
| committer | WebX11 SysOp <darkmotox11@gmail.com> | 2026-11-05 20:54:29 +0100 |
| commit | 3c0fe68f9e41c249c91c7688571b2347f7f9281a (patch) | |
| tree | c4a1c7be2c78febc49386c49ac831a6c907427b3 | |
| parent | 49c6fe2c1bcd12ca06d81a1f340c484d1aca5982 (diff) | |
docs(newos4): usage page fits a 390 px screen
Two measured overflows, both structural: a grid item defaults to min-width:auto
so one long command stretched the column to 521 px, and the troubleshooting table
had no fixed layout so a column of long code strings pushed the page 75 px wide.
minmax(0,1fr) + min-width:0 + table-layout:fixed + overflow-wrap:anywhere.
verify-mobile: 4/4 viewports OK.
| -rw-r--r-- | docs/usage.html | 13 |
1 files changed, 11 insertions, 2 deletions
diff --git a/docs/usage.html b/docs/usage.html index a8e2a49..9564012 100644 --- a/docs/usage.html +++ b/docs/usage.html @@ -24,13 +24,22 @@ pre code { background: none; padding: 0; font-size: .86rem; line-height: 1.55; display: block; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 14px 0; } - .os { display:grid; gap:14px; } + /* minmax(0,1fr) + min-width:0: a grid item defaults to min-width:auto, so one long + command line in a <pre> stretches the whole column past the viewport (measured 521 px + of content in a 390 px screen before this). */ + .os { display:grid; gap:14px; grid-template-columns: minmax(0,1fr); } + .os > div { min-width: 0; } + pre { max-width: 100%; } .kv { display:grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 8px 0 0; font-size:.9rem; } .kv dt { color: var(--dim); } .kv dd { margin:0; } .tag { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:2px 9px; } - table { width:100%; border-collapse:collapse; margin-top:10px; font-size:.9rem; } + /* fixed layout + wrapping: the troubleshooting table has a column of long <code> strings + and without this it forced the page 75 px wider than a 390 px viewport. */ + table { width:100%; border-collapse:collapse; margin-top:10px; font-size:.9rem; + table-layout: fixed; } + td, th { overflow-wrap: anywhere; word-break: break-word; } th, td { text-align:left; padding:7px 10px 7px 0; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--dim); font-weight:600; } .warn { border-left:3px solid #d9a441; padding-left:14px; color:#e8d3a8; margin:12px 0; } |