fix(ui): reconnecting indicator no longer shifts content - #11911
Conversation
…contrast (#11864) The WebSocket reconnecting banner rendered in document flow as a shrink-0 flex sibling of the page (App.tsx:2479), so it pushed the header + content down on every reconnect blip. It also used bg-warn (#ff8a24) with white text (~2:1 contrast, fails WCAG). - Render the transient "reconnecting" state as a floating overlay pill (absolutely positioned, out of flow) → 0px content shift. - Near-black text on the orange pill for ~8:1 contrast. - Keep the persistent, actionable "connection lost" state as an in-flow bar (Retry/Dismiss), preserving the macOS titlebar-banner integration. - Add ConnectionFailedBanner.test.tsx (overlay vs in-flow regression), a ReconnectingOverContent story, and a Playwright proof measuring the header Y delta (in-flow bar = 44px shift, overlay pill = 0px). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Claude encountered an error —— View job I'll analyze this and get back to you. |
3 participants
Supersedes #11867. Closes #11864.
Summary
Validation
Evidence
N/A: real-LLM trajectories (UI connection-status rendering only); audio (no voice change).