From 2d83ed7b453f5886e8da2c0e0c2c81a8f396c9ad Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Fri, 8 May 2026 06:07:43 -0600
Subject: [PATCH] Wire-dump: lift overflow-x: auto to base rule
 (tablet-portrait fix)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the horizontal-scroll fallback only applied at ≤640px; between
641px and 799px (tablet portrait, narrow desktop 2-col), the hero stayed
2-column so the wire-dump column could still be too narrow for the
~564px hex content, and overflow: hidden silently clipped the right side.

Lifting overflow-x: auto to all widths means: (a) any width where the
column is wider than the hex, content displays normally with no scroll;
(b) any width where the column is narrower, content becomes
horizontally-scrollable inside the dump. y stays hidden to keep the
typed-out animation's unrevealed lines clipped below the fold.
---
 docs-site/src/styles/components.css | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs-site/src/styles/components.css b/docs-site/src/styles/components.css
index 7622d51..85c1cf9 100644
--- a/docs-site/src/styles/components.css
+++ b/docs-site/src/styles/components.css
@@ -133,7 +133,12 @@
   border-radius: 8px;
   padding: 1.25rem 1rem;
   height: clamp(280px, 35vw, 360px);
-  overflow: hidden;
+  /* x: auto allows hex content to scroll horizontally inside the dump
+     when the column is too narrow (tablet portrait, narrow desktop with
+     2-col hero); y: hidden keeps the dump's vertical bounds fixed so
+     unrevealed animation lines stay clipped below the fold */
+  overflow-x: auto;
+  overflow-y: hidden;
   position: relative;
   box-shadow: inset 0 0 60px rgba(245, 165, 36, 0.04);
 }
@@ -378,14 +383,13 @@
   }
 
   /* 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. */
+     are ~50 chars wide. Two things together make it readable on
+     narrow viewports: smaller font and ASCII column hidden. The
+     overflow-x: auto fallback already lives on the base rule. */
   .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;