Skip to content

fix(ui): restore edge-to-edge soft-glass phone footer#1264

Merged
BigSimmo merged 7 commits into
mainfrom
codex/phone-footer-glass
Jul 26, 2026
Merged

fix(ui): restore edge-to-edge soft-glass phone footer#1264
BigSimmo merged 7 commits into
mainfrom
codex/phone-footer-glass

Conversation

@BigSimmo

@BigSimmo BigSimmo commented Jul 26, 2026

Copy link
Copy Markdown
Owner

Summary

  • replace the opaque phone search-footer slab with a localized soft-glass layer while keeping the pill readable and the dock flush to every viewport edge
  • release footer paint, pointer ownership, and content reserve completely when hidden across shared modes, Document Viewer, and Calculators
  • make page-owned calculator reserve transitions use the shared geometry budget and suppress scroll anchoring only during the 240 ms transition, preventing clamp/jump oscillation
  • add static and production-browser guards for Services, Calculators, exaggerated 112 px safe areas, insufficient-runway refusal, and frame-monotonic hide/reveal

Verification

  • npm run verify:pr-local — PASS (format, lint, typecheck, 393 unit files / 3517 passed / 2 skipped, production build/client scan)
  • npm run verify:ui — isolated production build; 312/313 Chromium passed, sole unchanged Answer short-runway geometry outlier passed immediate exact rerun 1/1
  • focused Services + Calculators glass cases — PASS
  • calculator insufficient-runway and sufficient-runway monotonic transition cases — PASS 3/3
  • npm run verify:release — not run; no release/provider-backed gate needed for this CSS/browser-scoped PR

Risk and rollout

  • Risk: phone-only fixed composer paint and scroll geometry; highest residual risk is physical iOS/WebKit safe-area and momentum compositing beyond simulated Chromium
  • Rollback: revert the four commits in this PR to restore the previous opaque dock and reserve behavior
  • Provider or production effects: None. No Supabase/OpenAI/production data or configuration interaction.

RAG impact: no retrieval behaviour change — phone chrome CSS, layout geometry, documentation, and browser tests only

Clinical Governance Preflight

Not applicable: no ingestion, answer generation, search/ranking, source rendering, document access, privacy, production environment, or clinical output change.

Notes

  • Final independent review: no P0-P3 findings; ready to merge after required hosted checks.
  • Review ledger appended without rewriting prior records.

Summary by CodeRabbit

  • New Features

    • Improved the mobile search dock with a translucent glass effect, safe-area support, and smoother hide/reveal behavior.
    • Enhanced calculator and document composer transitions when mobile chrome is hidden or restored.
    • Improved scrolling stability during header, dock, and calculator transitions.
  • Bug Fixes

    • Prevented scroll clamping, anchoring loops, and visual jumps near the bottom of phone layouts.
    • Ensured dock reserves and spacing are released and restored consistently.
  • Tests

    • Added coverage for mobile glass styling, safe-area behavior, scrolling geometry, and transition stability.

@supabase

supabase Bot commented Jul 26, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitai Bot commented Jul 26, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@BigSimmo, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 9 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 2be2c9d9-2a1b-4821-b956-f4f680742153

📥 Commits

Reviewing files that changed from the base of the PR and between ae3ab24 and 5e976b0.

📒 Files selected for processing (7)
  • docs/branch-review-ledger.md
  • src/components/calculators/search-page.tsx
  • src/components/clinical-dashboard/use-hide-on-scroll.ts
  • tests/mobile-chrome-paint-contract.test.ts
  • tests/ui-phone-scroll.spec.ts
  • tests/ui-tools.spec.ts
  • tests/use-hide-on-scroll.test.ts
📝 Walkthrough

Walkthrough

Changes

The phone search dock now uses localized translucent glass backdrop rendering and opacity-based hiding. Calculator pages expose reserve-owner transition metadata, while shared scroll-hide calculations account for multiple reserves and a 96px collapse runway. CSS, unit, contract, and browser tests cover rendering and geometry behavior.

Phone Chrome

Layer / File(s) Summary
Phone dock glass rendering
src/app/globals.css, src/components/calculators/search-page.tsx, src/components/clinical-dashboard/master-search-header.tsx, src/components/DocumentViewer.tsx, tests/mobile-chrome-paint-contract.test.ts, tests/ui-phone-scroll.spec.ts
The phone dock uses a transparent container with an absolute translucent backdrop, opacity-based hidden states, and transform-plus-opacity transitions. Paint and browser tests validate visible and hidden dock states.
Reserve-owner transition wiring
src/components/calculators/search-page.tsx, src/components/clinical-dashboard/search-results-layout.tsx, src/components/clinical-dashboard/use-hide-on-scroll.ts, src/app/globals.css, docs/search-chrome-behaviour.md, tests/mobile-chrome-paint-contract.test.ts
Calculator dock state drives reserve-transition markers, layout data attributes, per-owner hidden padding, and transition CSS behavior.
Near-bottom scroll stability
src/components/clinical-dashboard/use-hide-on-scroll.ts, tests/use-hide-on-scroll.test.ts, tests/ui-phone-scroll.spec.ts, docs/branch-review-ledger.md
Collapse gating uses a 96px runway, reserve release sums named owners, and regression tests verify stable hide/reveal geometry and scroll anchoring near the bottom.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant PhonePage
  participant SearchResultsLayout
  participant MainContent
  participant ScrollHideEngine
  participant PhoneDock
  PhonePage->>SearchResultsLayout: pass reserve transition state
  SearchResultsLayout->>MainContent: render reserve data attributes
  ScrollHideEngine->>MainContent: measure reserve owners and collapse runway
  ScrollHideEngine->>PhoneDock: update hidden state
  PhoneDock-->>PhonePage: animate opacity and backdrop visibility
Loading

Possibly related PRs

Suggested labels: codex

Suggested reviewers: cursoragent

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: restoring the edge-to-edge soft-glass phone footer.
Description check ✅ Passed The description follows the template and covers summary, verification, risk, governance, and notes.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/phone-footer-glass

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ae3ab24818

ℹ️ 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".

Comment thread src/components/clinical-dashboard/use-hide-on-scroll.ts
@BigSimmo

Copy link
Copy Markdown
Owner Author

@codex resolve actionable Codex review findings for this pull request and current head using the repository instructions. This is the pull request's single automatic repair pass: do not perform a fresh review, create new standalone findings, or request another review. Work only the existing unresolved Codex threads on the current head. Always fix P0 and P1 findings. For P2 and lower findings, fix only clear, scoped, low-risk issues; otherwise disposition them with a concise reason. After fixing or dispositioning a thread, reply in that thread with as the first line, followed by a concise summary; that marker authorizes the workflow to close that exact thread. If human input or new authorization is required, do not use the marker and leave the thread open with the blocker. Finish only after every actionable thread is fixed or dispositioned and closed, or explicitly left open for a human decision. Do not update the branch from main, address unrelated reviews, broaden scope, or create more than one scoped fix commit. Do not use external APIs, paid services, credentials, dependency changes, or broad refactors unless explicitly authorized. Add targeted tests where behavior changes and run the narrowest relevant validation.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/calculators/search-page.tsx`:
- Around line 666-683: Clear dockFocused asynchronously when the mobile search
dock unmounts, covering the submitSearch → setOpenId path where onBlurCapture
may not fire. Add an unmount cleanup near the dock focus state/effect in
search-page.tsx that resets dockFocused without synchronously updating state
during teardown, preserving dockHidden, reserveTransitioning, and reserve
release behavior; follow the teardown pattern documented in
master-search-header.tsx.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 6f8f67d5-9adb-4c17-8ba8-91b8ebc0894b

📥 Commits

Reviewing files that changed from the base of the PR and between e20a775 and ae3ab24.

📒 Files selected for processing (11)
  • docs/branch-review-ledger.md
  • docs/search-chrome-behaviour.md
  • src/app/globals.css
  • src/components/DocumentViewer.tsx
  • src/components/calculators/search-page.tsx
  • src/components/clinical-dashboard/master-search-header.tsx
  • src/components/clinical-dashboard/search-results-layout.tsx
  • src/components/clinical-dashboard/use-hide-on-scroll.ts
  • tests/mobile-chrome-paint-contract.test.ts
  • tests/ui-phone-scroll.spec.ts
  • tests/use-hide-on-scroll.test.ts

Comment thread src/components/calculators/search-page.tsx
@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep them coming!

Reviewed commit: ae3ab24818

ℹ️ 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".

@github-actions

Copy link
Copy Markdown
Contributor

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

  • Production UIneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • PR requiredneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #5893 (success).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

@BigSimmo
BigSimmo merged commit 2b08c9b into main Jul 26, 2026
18 checks passed
@BigSimmo
BigSimmo deleted the codex/phone-footer-glass branch July 26, 2026 14:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant