David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(pos): slip layout preview collapsed to a single squished line

Browse source 
Two compounding issues, both pre-existing (this exact <span>-joining
pattern and CSS was carried over unchanged from the old settings.html
preview I moved in the previous commit):

1. Preview lines are joined as adjacent <span> elements with no
   separator, so without an explicit block display they render as
   one continuous inline line instead of stacked rows.
2. .receipt-preview sits directly in body's flex-column layout and
   has overflow-x:auto — per the CSS Flexbox spec, an overflow-bearing
   flex item's automatic minimum size becomes 0 instead of its content
   size, so the flex column was free to squeeze it down to a sliver
   regardless of its 19 lines of content.

Fixes: span{display:block} for the per-line stacking, flex-shrink:0
so the flex column can't shrink it below its content height.
This commit is contained in:
Dave 2026-09-04 14:07:39 +02:00
parent 978456a807
commit ec711760a3
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/pos/slip-layout.html
View file

@ -35,7 +35,11 @@ body{display:flex;flex-direction:column;min-height:100dvh;max-width:480px;margin
.preview-tabs{display:flex;gap:6px;padding:4px 4px 10px}
.preview-tab{flex:1;padding:8px 10px;border:1px solid var(--muted);border-radius:10px;background:#fff;font-size:13px;font-weight:600;color:var(--fg)}
.preview-tab.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.receipt-preview{font-family:monospace;font-size:10px;line-height:1.35;background:#fdfdfa;color:#1a1a1a;border:1px solid #999;border-radius:4px;padding:10px 10px;width:260px;max-width:100%;margin:0 auto 4px;box-shadow:0 2px 6px rgba(0,0,0,.08);white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:keep-all;position:relative}
.receipt-preview{font-family:monospace;font-size:10px;line-height:1.35;background:#fdfdfa;color:#1a1a1a;border:1px solid #999;border-radius:4px;padding:10px 10px;width:260px;max-width:100%;margin:0 auto 4px;box-shadow:0 2px 6px rgba(0,0,0,.08);white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:keep-all;position:relative;flex-shrink:0}
/* Each preview line is its own <span> with no separator between
them in the generated HTML — without this, spans are inline and
the whole preview collapses onto a single squished line. */
.receipt-preview span{display:block}
.receipt-preview .center{text-align:center;display:block}
.receipt-preview .em{font-weight:700;color:#000}
/* ---- Block list ---- */