Make the thread composer read as elevated liquid glass

[juliusmarminge]

Summary

The glass composer had the glass effect but blended into the background instead of floating above it like the native search bar. Three fixes in ThreadComposer.tsx:

• effect="clear" → effect="regular" — the native search bar uses the regular liquid glass material (built-in rim highlight, adaptive shading, system shadow). clear is the flat variant meant for glass over media; over a white feed it disappears.
• Dropped the ~50% tint — regular glass supplies its own milky base; the heavy tint on top flattened it. Untinted regular matches the system search-bar recipe.
• Added a drop shadow (0.12 light / 0.35 dark, radius 14, y-offset 6; elevation: 10 for Android/fallback). Lives on a wrapper view since overflow: "hidden" on the surface would clip it on iOS. The opaque fallback path gets the same shadow.
• Softened the backdrop gradient (0.85 @ 40% → 0.95 down to 0.6 @ 55% → 0.9) so feed content stays faintly visible under the pill — previously the glass sat on near-opaque white with nothing to refract.

Testing

• Collapsed pill + expanded card, light and dark mode, on an iOS 26 device (liquid glass path)
• Fallback path (non-glass devices / Android) still renders opaque surface with shadow

🤖 Generated with Claude Code

---

Note

Low Risk
Visual-only styling in the mobile thread composer; no messaging, auth, or data-path changes.

Overview
Updates ComposerSurface in ThreadComposer.tsx so the composer reads as floating above the feed instead of blending in.

On the liquid-glass path, LiquidGlassView switches from effect="clear" to effect="regular" and drops tintColor, relying on the system material. Both glass and opaque fallbacks are wrapped in an outer View that carries a theme-aware drop shadow (and elevation on Android), so clipping from overflow: "hidden" on the pill/card does not eat the shadow on iOS.

The composer chrome backdrop gradient is softened (mid stop 40% → 55%, opacities 0.85/0.95 → 0.6/0.9) in light and dark mode so more feed shows through under the pill.

^{Reviewed by Cursor Bugbot for commit 053d14a. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Render thread composer with elevated liquid glass effect and drop shadow

• Updates ComposerSurface in ThreadComposer.tsx to wrap the surface in a shadow container (radius 14, offset {0,6}, elevation 10) on all platforms.
• Switches the LiquidGlassView effect from "clear" to "regular" and removes the tintColor prop on supported iOS devices.
• Reduces opacity of the background gradient behind the composer (mid-stop moves from 40%→55%, mid opacity 0.85→0.6, end opacity 0.95→0.9) in both light and dark modes.

^{Macroscope summarized 053d14a.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c7bd676a-0aab-4ac4-a6d6-98533c307760

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch glass-composer-elevation

---

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