feat(ui): redesign gateway connection-lost banner as floating pill#101812
Conversation
openclaw-barnacle
Bot
added
docs
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: eee8a97f2f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| top: 0; | ||
| z-index: 11; | ||
| position: fixed; | ||
| top: calc(var(--shell-topbar-height, 44px) + 10px); |
There was a problem hiding this comment.
In installed PWA/viewport-fit-cover contexts, the standalone body rule already adds --safe-area-top padding, but this new position: fixed banner is positioned against the viewport instead of the padded shell. With the 34px inset covered by the existing safe-area tests, the topbar occupies roughly 34–78px while this pill starts at 54px, so reconnecting users on notched devices see it overlap the topbar rather than sit below it. Please add the safe-area inset here, or anchor the pill to a shell element that already includes it.
Useful? React with 👍 / 👎.
| .connection-banner__title { | ||
| color: var(--text-strong); | ||
| font-weight: 600; | ||
| white-space: nowrap; |
There was a problem hiding this comment.
On narrow mobile widths with localized labels, hiding only connection-banner__state still leaves the title and retry button unbreakable. Existing Polish/Portuguese/German strings plus the spinner, gaps, and padding exceed the 288px inner width of a 320px phone, and flex items with nowrap min-content cannot shrink, so the Retry now action can render off-screen; the previous in-flow banner used flex-wrap and stayed usable. Please let this text wrap/truncate or further simplify the mobile pill.
Useful? React with 👍 / 👎.
|
Codex review: needs changes before merge. Reviewed July 7, 2026, 1:00 PM ET / 17:00 UTC. Summary PR surface: Source +64, Docs 0. Total +64 across 3 files. Reproducibility: yes. from source inspection. The PR's fixed top offset ignores the existing standalone safe-area body padding, and the nowrap title/retry CSS conflicts with existing longer locale strings on narrow phones. Review metrics: none identified. Merge readiness Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch. Rank-up moves:
Risk before merge
Maintainer options:
Next step before merge
Security Review findings
Review detailsBest possible solution: Keep the no-reflow floating pill, but make its fixed offset safe-area-aware and make the mobile pill shrink, wrap, or truncate safely across localized labels before merge. Do we have a high-confidence way to reproduce the issue? Yes, from source inspection. The PR's fixed top offset ignores the existing standalone safe-area body padding, and the nowrap title/retry CSS conflicts with existing longer locale strings on narrow phones. Is this the best way to solve the issue? No. The floating pill is the right maintainable direction, but the CSS needs safe-area positioning and narrow-width localization handling before this is the best fix. Full review comments:
Overall correctness: patch is incorrect AGENTS.md: found and applied where relevant. Codex review notes: model internal, reasoning high; reviewed against fa84741f93b9. Label changesLabel changes:
Label justifications:
Evidence reviewedPR surface: Source +64, Docs 0. Total +64 across 3 files. View PR surface stats
Acceptance criteria:
What I checked:
Likely related people:
What the crustacean ranks mean
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics. How this review workflow works
|
clawsweeper
Bot
added
proof: sufficient
|
Merged via squash.
|
1 participant
What Problem This Solves
The gateway connection-lost banner predates the tiny-top-bar dashboard chrome (#101497). It renders as a full-width amber gradient strip that pushes the whole page down when the connection drops and yanks it back up on reconnect, so every connection flap causes a layout jump. Visually it shouts across the entire content column for a transient, self-healing state.
Why This Change Was Made
The banner is redesigned as a compact floating pill centered under the top bar: warn-tinted translucent background with backdrop blur, spinner, bold title, muted "Reconnecting…" state, and a pill-shaped Retry button. It is a fixed overlay, so content no longer reflows when the connection drops or returns. The long "Live updates and actions are paused…" sentence moves out of the visible pill into the pill tooltip (merged with the redacted last-error detail) and stays available to screen readers via a visually hidden span inside the existing
role="status"live region. On narrow viewports the "Reconnecting…" label is dropped so the pill fits phone widths; the pill sits below the mobile nav drawer in stacking order. No i18n strings, banner mount conditions, or retry wiring changed.User Impact
Losing the gateway connection no longer shoves the page content down: a small reconnect pill floats over the page, matching the redesigned dashboard chrome, and disappears when the connection returns. Retry now works as before; the pause explanation is available on hover and to screen readers.
Evidence
Before/after captures from the local dev UI connected to a real gateway (simulated post-session drop on the Settings page):
Mobile (375 px, "Reconnecting…" label dropped): https://artifacts.openclaw.ai/pr-connection-pill-20260707/after-light-375.png
Artifact manifest: https://artifacts.openclaw.ai/pr-connection-pill-20260707/artifact-manifest.json
pnpm check:changed: run id in PR checks/comment thread.