From 67e52ebfcd9bb69e40caf2df0a972beff9769792 Mon Sep 17 00:00:00 2001 From: Kpa-clawbot Date: Sun, 17 May 2026 12:58:27 -0700 Subject: [PATCH] =?UTF-8?q?fix(#1250):=20trim=20mobile=20VCR=20bar=20h-pad?= =?UTF-8?q?ding=208px=E2=86=924px=20to=20clear=200.83px=20LCD=20clip=20(#1?= =?UTF-8?q?251)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Red: master CI run https://github.com/Kpa-clawbot/CoreScope/actions/runs/25995768081 already fails on `test-e2e-playwright.js` `#1221 LCD clipped on right (right=375.828125, vw=375)`. No new test commit — the existing E2E assertion is the gate. **Root cause.** PR #1222's mobile rule set `.vcr-bar { padding: 4px 8px }`. The flex row holds three `flex-shrink: 0` children (controls + scope-btns + lcd) and one `flex: 1 1 0` absorber (`.vcr-timeline-container`, `min-width: 40px`). At 375px viewport the absorber hits its floor, so the intrinsic widths of the shrink-frozen children spill 0.83px past the padding box. **Fix.** Drop horizontal padding 8px → 4px inside the `@media (max-width: 640px)` block. That's 8px of new slack — order of magnitude above the 0.83px clip — keeping LCD's `getBoundingClientRect().right ≤ 375`. Desktop layout untouched (rule is mobile-scoped). VCR/feed overlap (#1206/#1213) not reintroduced because `--vcr-bar-height` is JS-measured by the ResizeObserver, not pinned in CSS. Fixes #1250 Co-authored-by: openclaw-bot --- public/live.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/public/live.css b/public/live.css index c45345cd..ece53334 100644 --- a/public/live.css +++ b/public/live.css @@ -1030,7 +1030,14 @@ * Fix: `flex-wrap: nowrap`, the timeline gets `flex: 1 1 0` so it * absorbs leftover width, and scope buttons shrink (1/6/More) to fit. */ .vcr-bar { - padding: 4px 8px; + /* #1250: shaved horizontal padding from 8px → 4px. At 375px viewport the + * row of flex-shrink:0 children (controls + scope-btns + lcd) overflowed + * the padding box by 0.83px even though .vcr-timeline-container is + * flex:1 1 0 — its min-width:40px floor leaves the rest to absorb the + * overflow. 4px headroom on each side is well above the 0.83px clip and + * keeps the LCD's right edge ≤ viewport width. Desktop is unaffected + * (this rule is inside @media (max-width: 640px)). */ + padding: 4px 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 20px)); flex-wrap: nowrap; gap: 4px;