From ec711760a3c3d67c3aea17e4ab23c25b4a4f1df6 Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 4 Sep 2026 14:07:39 +0200 Subject: [PATCH] fix(pos): slip layout preview collapsed to a single squished line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two compounding issues, both pre-existing (this exact -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 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. --- public/pos/slip-layout.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/pos/slip-layout.html b/public/pos/slip-layout.html index 45f72be..58b6c09 100644 --- a/public/pos/slip-layout.html +++ b/public/pos/slip-layout.html @@ -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 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 ---- */