warehack.ing/informix-db
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wire-dump: lift overflow-x: auto to base rule (tablet-portrait fix)

Browse Source 
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.
This commit is contained in:
Ryan Malloy 2026-05-08 06:07:43 -06:00
parent dc7b9bfd94
commit 2d83ed7b45
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs-site/src/styles/components.css
View File

@ -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;