fix(#1250): trim mobile VCR bar h-padding 8px→4px to clear 0.83px LCD clip (#1251)

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 <bot@openclaw.local>
This commit is contained in:
Kpa-clawbot
2026-05-17 12:58:27 -07:00
committed by efiten
parent 4a016e442d
commit 67e52ebfcd
+8 -1
View File
@@ -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;