Restore the ultrathink frame border effect

[juliusmarminge]

Summary

• Restores the .ultrathink-frame rainbow border as an overlay pseudo-element instead of applying the effect directly to the container background.
• Keeps the animated spectrum border visible while preserving a transparent interior and rounded corners.
• Ensures child content stays above the border layer with explicit stacking behavior.

Testing

• Not run (no code execution requested).
• Visual check recommended in the web UI to confirm the border animation, masking, and content layering render correctly.

---

Note

Low Risk
CSS-only presentation change for the ultrathink composer frame; no logic, auth, or data paths touched.

Overview
Restores the ultrathink chat composer rainbow border by moving the animated spectrum off .ultrathink-frame itself and onto a ::before overlay with a 2px masked ring, so the interior stays transparent and corners still follow border-radius: inherit.

The frame container is now position: relative with background: transparent, and direct children get position: relative so content stacks above the non-interactive border layer (pointer-events: none). The existing ultrathink-rainbow animation and spectrum styling are unchanged; only how the border is painted differs from painting the whole box background.

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

Note

Restore the ultrathink frame border effect using a ::before pseudo-element

The animated rainbow gradient on .ultrathink-frame was previously applied directly on the element, which caused it to obscure content. This PR moves the gradient to a ::before pseudo-element with CSS masking (mask with exclude composite) so the effect renders only as a border, leaving the inner content visible and interactive.

• Adds position: relative and background: transparent to .ultrathink-frame to support the new layering approach.
• The ::before overlay uses padding: 2px and mask compositing to create the border-only appearance.
• Direct children of .ultrathink-frame get position: relative to ensure correct stacking above the pseudo-element overlay.

^{Macroscope summarized 8cd353a.}

[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: 718c2f7e-0377-490f-b558-0e68e916b9c1

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 t3code/ultrathink-border-revert

---

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

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Two pixel border clipped
  • Changed the wrapper's padding from p-px (1px) to p-0.5 (2px) to match the ::before pseudo-element's 2px ring thickness, preventing the glass surface from covering the inner half of the border.

Or push these changes by commenting:

@cursor push 0aab2f540f

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 8cd353a. Configure here.}

[cursor]

Two pixel border clipped

Medium Severity

The ::before mask uses padding: 2px for a 2px ring, but the composer wrapper keeps p-px (1px) and .ultrathink-frame > * stacks the glass surface above the pseudo-element. The inner half of the ring sits under the surface, so the restored ultrathink border reads thinner or clipped.

 

^{Reviewed by Cursor Bugbot for commit 8cd353a. Configure here.}