From 3c0fe68f9e41c249c91c7688571b2347f7f9281a Mon Sep 17 00:00:00 2001
From: WebX11 SysOp <darkmotox11@gmail.com>
Date: Thu, 5 Nov 2026 20:54:29 +0100
Subject: 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.
---
 docs/usage.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'docs/usage.html')

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; }
-- 
cgit v1.2.3