fix(web): align the sidebar Search bubble with the chat overflow bubble

[omni-resolve-agent]

Related issue

Resolves OMNI-9122

Summary

On phones, the sidebar Search button sat above or below the chat menu button, depending on whether the app ran in a browser or a native shell.

The sidebar now uses the chat header's height and safe-area offset so the two buttons line up.

Test Plan

• tests/e2e_ui/mobile/test_sidebar_bubble_alignment.py covers both narrow web and simulated iOS-shell layouts.
• Narrow web: before the fix, Search was centered at y=24 and the chat menu at y=28. After the fix, their centers align within 1px.
• Simulated iOS shell: before the fix, Search was centered at y=83 and the chat menu at y=79. After the fix, their centers align within 1px.

Manual check to perform: On a narrow browser window and an iPhone, open the sidebar and compare the vertical centers of its Search button and the chat menu button.

Original verification run

Resolve workflow

Demo

• Visual demo attached below
• Non-visual evidence provided below or in Test Plan
• Not applicable — no behavioral change

Before/after recordings from the original resolve-agent update:

• before-web-thin.mp4
• before-ios.mp4
• after-web-thin.mp4
• after-ios.mp4

These recordings use the browser stand-in described in Coverage notes; they are not native iOS verification.

Type of change

• Bug fix
• Feature
• UI / frontend change
• Refactor / chore
• Docs
• Test / CI
• Breaking change

Test coverage

• Unit tests added / updated
• Integration tests added / updated
• E2E tests added / updated
• Manual verification completed
• Existing tests cover this change
• Not applicable

Coverage notes

The iOS case used desktop Chromium at 390×844 with an injected native bridge and a 59px safe-area override. It was not verified on a real iOS device or WebKit.

Changelog

The sidebar Search button now lines up with the chat menu button on narrow screens.

[github-actions]

UI Preview for this PR has been removed.

[omnigent-ci]

Polly AI Review

Missing visual demonstration

Please attach a screenshot or video showing the aligned bubbles at phone width. Include narrow web and, ideally, a notched iOS simulator or device. Test results alone do not demonstrate the visual outcome.

Blocking issues

None found in the changed code.

Security vulnerabilities

None found.

Non-blocking notes

• The CSS also changes Android behavior, but the new tests cover only web and simulated iOS. Consider extending coverage using the existing iOS/Android parametrization in tests/e2e_ui/mobile/test_native_shell_plan_header_overlap.py:155.
• The Chromium bridge stub and safe-area override check layout geometry, not actual WKWebView rendering. On a notched iOS device or simulator, open a conversation and its sidebar; confirm that Search and the exposed overflow bubble share a centerline and remain clear of the status bar.

Approach

The approach is sound. Matching the mobile header heights and native top offsets addresses both causes directly. The desktop height override and phone-only padding rule preserve the existing larger-screen layout; no materially simpler alternative is apparent.

Summary

The changes address the reported offsets consistently, with no concrete correctness or security blocker found. The supplied diff checksum was verified, but runtime tests were not executed because the required UI environment was unavailable. Add visual evidence and confirm the result on real iOS/WebKit before considering the native behavior fully validated.

---

_{Automated review by Polly · workflow run}

[github-actions]

@omni-resolve-agent[bot] This PR checks UI / frontend change, but the Demo section has no screenshot or recording.

UI / frontend changes require visual evidence so reviewers can see the new behaviour without checking out the branch. Please update the Demo section with:

• A screenshot or screen recording of the change, or
• A link to a hosted video or GIF showing the new behaviour.

If this PR has no visual surface, uncheck UI / frontend change and provide non-visual evidence in the Test Plan.