fix(ui): restore real backdrop blur and harden the glass header#578
Conversation
Post-merge review of the glass header (#570) surfaced that the CSS build pipeline was silently dropping EVERY hand-authored backdrop-filter declaration: the manual -webkit-backdrop-filter duplicates in globals.css confused Lightning CSS's property merging, so the header scrim, the bottom dock's three-pass progressive blur, and the composer pill had been tint-only in every engine all along — the only real blur came from Tailwind utilities. Removing the manual -webkit- duplicates (the pipeline handles prefixing) restores genuine blur to all of them, verified via computed styles and visual probes. With real blur available, the review's remaining findings are fixed: - The header element no longer carries backdrop-blur utilities (an element with backdrop-filter forms a backdrop root that starves the nested scrim of the page behind it — redundant in Chromium, inert in WebKit). The retuned scrim (14/20/26px, top-biased masks) is now the single source of the bar's frost and samples the real page in every engine, cutting the always-active blur layers on the answer view. - Every scrim mask now fades to true zero before content rests, so no faint veil sits on the first line at rest, and the hidden-state residual is bounded by a new test assertion. - The private-scope recovery alert is sticky inside <main> so its actions stay reachable while scrolling in every mode (it previously scrolled away in non-answer modes); covered by a new test. - The scroll-hide reporter resets its direction state when the breakpoint gate changes, avoiding a stale hide/reveal blip on phone mode switches. - The no-blur / reduced-transparency fallback bar backgrounds are now layered so call-site utilities keep winning per the header-chrome layering contract; the forced-colors override stays unlayered on purpose. Review recorded in docs/branch-review-ledger.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A1ekcXQZVFVKKzdoVpjyVQ
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe change retunes glass header and composer styling, removes authored vendor backdrop declarations, resets scroll-hide state when breakpoint behavior changes, keeps the private-scope recovery alert visible during answer scrolling, updates smoke and CSS checks, and adds a review ledger record. ChangesGlass UI and scroll reachability
Review ledger update
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 11✅ Passed checks (11 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
✨ Simplify code
Comment |
![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: 9319499ff9
ℹ️ 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".
|
@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. |
|
To use Codex here, create a Codex account and connect to github. |
… claims
Disposition of the Codex P2 on the glass-header PR ("preserve prefixed
backdrop filters for WebKit-only support"): verified moot against the
built artifact. The served client stylesheet pairs an auto-generated
-webkit-backdrop-filter with every unprefixed declaration, so
prefix-only Safari (<= 17) already receives the blur; the finding
reviewed the source diff, not the build output. Re-adding hand-written
prefixes would reintroduce the very Lightning CSS property-drop bug this
branch fixes.
- Document the authoring rule beside the header scrim: write ONLY the
unprefixed backdrop-filter; the pipeline prefixes the build.
- Guard test: reject any hand-authored -webkit-backdrop-filter
declaration in globals.css (feature probes in @supports conditions
remain allowed).
- Rewrite the review-ledger Checks column as exact command: result
claims (fixes the CodeRabbit "Verification Claims" pre-merge check).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01A1ekcXQZVFVKKzdoVpjyVQ
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
2 participants
Summary
Post-merge review of the glass header (#570) — two independent review passes (CSS/visual/a11y/perf and logic/regression) found no P0/P1 but three substantive P2s. Root-causing the biggest one uncovered a repo-wide latent defect:
backdrop-filter. The manual-webkit-backdrop-filterduplicates inglobals.cssconfuse Lightning CSS's property merging, so the served CSS contained no hand-authored backdrop-filter at all — verified via CSSOM dump (only Tailwind'sbackdrop-blur-*utilities survived). This means the bottom dock's celebrated three-pass "progressive blur" and the composer pill'sblur(18px)have been tint-only in every engine since they shipped; the header's visible frost came solely from its Tailwindbackdrop-blur-xl. Fix: remove the manual-webkit-duplicates (the pipeline handles prefixing per browserslist). The dock and pill now render their designed blur for the first time — verified via computed styles (blur(2px)/blur(8px)/blur(22px)on the dock,14/20/26pxon the header scrim) and visual probes.backdrop-filterforms a backdrop root (Filter Effects L2) that starves the nested scrim of the page behind it (redundant in Chromium, historically inert in WebKit). The retuned scrim (14/20/26px, top-biased masks) now samples the real page in every engine and fully frosts the bar; net fewer always-active blur layers on the answer view.stickyinside<main>, pinned below the glass bar in answer mode and just under the in-flow header otherwise — previously (post-feat(ui): edge-to-edge glass header with progressive-blur scrolling #570) it scrolled away with content in non-answer modes, stranding its "Reselect documents / Run without private scope" actions. New test covers it (the selector previously had zero test references).@layer componentsso call-site utilities keep winning per the header-chrome layering contract (forced-colors stays unlayered deliberately, with a comment).docs/branch-review-ledger.mdperdocs/codex-review-protocol.md.Verification
npm run verify:pr-local— not run; equivalent gates below.npm run verify:cheap— exit 0 (full lint, typecheck, 1,935 unit tests, runtime/pins/sitemap/brand/scale checks) +npm run format:checkclean.backdrop-filters computing tononeand text legible through the "scrim-only" bar; after the fix, all passes compute their designed values and probe text behind the bar is fully frosted, with a crisp zero-veil handoff below the bar and the dock showing real progressive frost.tests/ui-smoke.spec.ts→ 71 passed, only the pre-existing unrelated/privacyheading failures (identical on cleanmain).Clinical Governance Preflight
N/A — presentation-layer only (CSS blur/scrim, header chrome, one sticky alert, scroll-hide state hygiene, tests, review ledger). No ingestion, answer generation, search/ranking, source rendering logic, document access, privacy, production env, or clinical output behavior changes.
Notes
-webkit-backdrop-filterremoval is safe cross-browser: the build pipeline auto-prefixes per browserslist, and Safari ≥18 (project baseline) supports unprefixedbackdrop-filternatively.Generated by Claude Code