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;