#22: [bug] Fix line information framing on the Emery detail screen · anthodev/lapin-fute

🔢 Impact Version (SemVer)

PATCH

📝 Description

Fix the slight styling defect around the line information block on the Emery detail screen. The reported screenshot shows the orange 42 badge, Gare du Nord and › Hôpital Européen above the departure countdown. The framing/separator spacing around this block looks incorrect.

The red rectangle is the user's annotation, not part of the UI. The screenshot is available in the original report conversation but is not attached to this issue. This is a targeted visual correction, not a screen redesign.

🔄 [Bug] Steps to Reproduce

On Emery, open the departure detail screen for a favorite with line 42, stop Gare du Nord and destination Hôpital Européen, using recorded fixture data for local verification.
Inspect the badge, stop name and destination block directly below the status bar.
Compare the horizontal separator placement and text spacing with the reported screenshot.

Reported context: Old data, first favorite of six, next departure in 1 min. Whether these states affect the defect is unconfirmed.

❌ [Bug] Current Behavior

The line information block has a visible framing/spacing defect on Emery. In particular, the lower gray separator appears too close to the destination text. The exact native rendering cause remains to be confirmed.

✅ Expected Behavior

The line badge, stop name and destination fit cleanly between the separators. No rule touches or crosses the text or badge, and margins remain consistent with the existing detail-screen design.

The reported Emery case renders without separator overlap or clipping.
Short and long stop/destination labels retain their existing fitting behavior without colliding with separators.
The status bar, departure countdown, subsequent departures, traffic row and navigation remain unchanged.
Shared rendering changes introduce no visual regression on Gabbro.
Before/after Emery emulator captures demonstrate the correction.

🔗 Affected Endpoints/Routes

No API endpoint changes. Affected screen: watch departure details on Emery.

🧪 Tests to Add

Type	Coverage
Native emulator visual verification	Reported Emery case; short and long labels; separator clearance and alignment
Native emulator regression	Gabbro detail screen if shared geometry changes
Host regression, where meaningful	Any corrected layout behavior that can be asserted independently of native font rasterization

Run npm run test:watch, npm run measure:radio and the watch build when the user-managed toolchain is available. Host suites alone cannot certify this pixel-level fix. No Behat or PHPUnit coverage is applicable to this watch renderer.

⚙️ Constraints

Preserve existing content, badge colors and information hierarchy.
Do not change fetching, cache behavior, AppMessage contracts or storage.
Use isolated emulators and recorded fixtures, with no live PRIM requests. Physical-device use requires explicit authorization.
Inspect the existing geometry before selecting a fix; avoid special-casing the reported labels.

🔀 Dependencies

Existing watch rendering and recorded fixture tooling.
Related design ticket: #16. This fix does not reopen the broader redesign.
No business-rule change or external-service dependency.

🔍 Technical Context

packages/watch/src/embeddedjs/ui.js:

departures(port,r,now), lines 144–152, draws the detail header block and its lower separator. Emery uses y=34, height=35; the destination drawing box starts at y+20 with height 18, while the separator sits at y+height-1. These bounds warrant inspection, but do not by themselves prove the native pixel-level cause.
chip(port,record,slot,x,y,width,height), lines 44–49, draws the colored line badge.
header(port,r,now,isStale,updating), Emery branch at lines 105–109, draws the status bar separator.

Review these existing functions and their profile-specific geometry, then validate the smallest correction with native captures.