From 1d33ac53b016abb94bbbe9a7af45d167f075aa3f Mon Sep 17 00:00:00 2001
From: Kpa-clawbot <kpaclawbot@outlook.com>
Date: Sun, 17 May 2026 16:26:51 -0700
Subject: [PATCH] fix(#1254): trim .badge-iata h-padding on mobile to clear
 1.25px clip (#1255)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #1254.

Master CI Playwright fail-fast on every push since #1252:

```
❌ Mobile viewport (375px): observer IATA badge stays visible — not clipped:
   .badge-iata right edge 376.25 exceeds 375px viewport
```

## Root cause

After #1252 unhid `.col-observer` at narrow widths so the IATA pill from
#1188 renders on mobile, at 375px the cell padding + truncated observer
name (10 chars in grouped rows) + `.badge-iata` pill (`padding: 1px 5px`
+ `margin-left: 4px`) sums to ~376.25px — overflowing the viewport by
1.25px.

Same class of failure as #1250/#1251 (VCR LCD-clip).

## Fix

`public/style.css` — inside the existing `@media (max-width: 640px)`
block, shrink `.badge-iata` `padding: 1px 5px → 1px 3px` and
`margin-left: 4px → 2px`. Reclaims ~6px horizontally, well clear of the
1.25px overflow. Desktop (≥641px) styling untouched.

## TDD

The failing E2E sub-test in `test-observer-iata-1188-e2e.js` (added in
#1189 R1) IS the red. Mutation verified locally:

| Variant            | Result |
|--------------------|--------|
| WITHOUT this fix | ❌ `.badge-iata right edge 376.25 exceeds 375px
viewport` |
| WITH this fix      | ✅ all 3 sub-tests pass |

## Local verification

```
$ go build -o /tmp/corescope-server ./cmd/server
$ /tmp/corescope-server -port 13581 -db test-fixtures/e2e-fixture.db -public public &
$ CHROMIUM_PATH=/usr/bin/chromium BASE_URL=http://localhost:13581 \
    node test-observer-iata-1188-e2e.js
Running observer-IATA E2E tests against http://localhost:13581
  ✅ Packets table renders an IATA badge in an observer cell
  ✅ Filter grammar: observer_iata == "<code>" narrows the table
  ✅ Mobile viewport (375px): observer IATA badge stays visible — not clipped
All observer-IATA E2E tests passed.
```

## Constraints honored

- All colors via existing CSS variables (no theming illusions; only
  `padding` / `margin-left` change inside `@media (max-width: 640px)`).
- No JS changes.
- Desktop badge display unaffected (selector scoped to narrow viewport).
- `config.example.json`: no config field added.
- PII preflight: clean.

Co-authored-by: OpenClaw Bot <bot@openclaw.local>
---
 public/style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/style.css b/public/style.css
index 9c92bacb..fb302327 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2021,6 +2021,12 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
     font-size: 14px;
   }
   .ch-avatar.ch-tappable { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
+  /* #1253: trim .badge-iata h-padding + margin-left on narrow viewports so
+   * the observer cell + IATA pill fits within a 375px viewport. Without this
+   * the badge right edge overflows by ~1.25px at 375px (same class of fix
+   * as #1250/#1251 VCR LCD-clip). Badge stays fully visible — only padding
+   * and side margin shrink; font-size, colors (via vars) unchanged. */
+  .badge-iata { padding: 1px 3px; margin-left: 2px; }
 }
 
 /* Full-screen node detail */