From dc7b9bfd942c3574f88b45df01ddd42b924f3f80 Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Fri, 8 May 2026 06:01:47 -0600
Subject: [PATCH] =?UTF-8?q?Mobile:=20fix=20hero=20overflow=20at=20?=
 =?UTF-8?q?=E2=89=A4640px,=20shrink=20wire-dump,=20hide=20ASCII=20column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: hero's grid items inherited min-width: auto, so the wire-dump's
white-space: pre hex lines (~564px wide content) forced the hero column to
that width, propagating up to the page and causing 193px of horizontal
overflow at narrow viewports.

Fix:
- min-width: 0 on .ifx-hero, .ifx-hero__copy, .ifx-hero__visual (lets
  grid items shrink below content's intrinsic min-width)
- overflow-x: auto on .ifx-wiredump (contains residual hex overflow
  inside the dump, not on the page)
- Font shrunk 0.78rem → 0.62rem on mobile, ASCII column hidden, padding
  tightened — readable hex without horizontal scroll inside the dump
- Eyebrow flex-wrap: wrap so the No-libcrypt suffix wraps cleanly
- Title floor 2rem → 1.75rem at 7.5vw for narrow screens
- Tightened CTA padding, install command word-break: break-all
---
 docs-site/src/styles/components.css | 81 +++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/docs-site/src/styles/components.css b/docs-site/src/styles/components.css
index 4538e3f..7622d51 100644
--- a/docs-site/src/styles/components.css
+++ b/docs-site/src/styles/components.css
@@ -326,6 +326,87 @@
   }
 }
 
+/* ============================================================
+ * Mobile (≤640px): tighten the hero, shrink the wire-dump,
+ * hide the ASCII column, prevent runaway horizontal overflow
+ * ============================================================ */
+
+@media (max-width: 640px) {
+  /* Defensive guard against any descendant forcing horizontal scroll —
+     the wire-dump's white-space: pre content was overflowing the
+     hero column and propagating up to the page. overflow-x: hidden
+     on .ifx-hero contains it without affecting page-level scroll. */
+  .ifx-hero,
+  .ifx-hero__copy,
+  .ifx-hero__visual {
+    min-width: 0; /* allow flex/grid item to shrink below content min-width */
+  }
+
+  .ifx-hero {
+    padding: 1.25rem 0 1.75rem;
+    gap: 1.25rem;
+  }
+
+  .ifx-hero__eyebrow {
+    flex-wrap: wrap;
+    row-gap: 0.25rem;
+    font-size: 0.7rem;
+    letter-spacing: 0.12em;
+  }
+
+  .ifx-hero__title {
+    font-size: clamp(1.75rem, 7.5vw, 2.5rem);
+    line-height: 1.1;
+  }
+
+  .ifx-hero__lede {
+    font-size: 0.95rem;
+    line-height: 1.55;
+  }
+
+  .ifx-hero__cta {
+    gap: 0.5rem;
+  }
+  .ifx-hero__cta a {
+    padding: 0.55rem 0.9rem;
+    font-size: 0.92rem;
+  }
+
+  .ifx-hero__install {
+    font-size: 0.85rem;
+    word-break: break-all; /* survive any future longer install command */
+  }
+
+  /* The wire-dump is the biggest mobile risk: pre-formatted hex lines
+     are ~50 chars wide. Three things together make it survive narrow
+     viewports: smaller font, ASCII column hidden, horizontal-scroll
+     fallback if the hex itself still overruns. */
+  .ifx-wiredump {
+    font-size: 0.62rem;
+    height: clamp(220px, 60vw, 280px);
+    padding: 0.85rem 0.65rem;
+    overflow-x: auto;
+  }
+  .ifx-wiredump__byte--ascii {
+    display: none;
+  }
+  .ifx-wiredump__caption {
+    font-size: 0.62rem;
+    text-align: left;
+  }
+
+  .ifx-features {
+    gap: 0.9rem;
+    margin: 2rem 0;
+  }
+  .ifx-feature {
+    padding: 1.1rem;
+  }
+  .ifx-feature h3 {
+    font-size: 1rem;
+  }
+}
+
 /* Performance-bar visual for the comparison table */
 .ifx-perfbar {
   position: relative;