fix(web): clear composer border after picker dismissal

[AbdulelahHajjar]

What Changed

Replaced focus-within:border-ring/45 with has-focus-visible:border-ring/45 on the composer container in ChatView.tsx.

Why

The composer border highlights when the editor is active using focus-within, which maps to CSS :focus-within. This works well for the editor itself but it also activates when toolbar buttons (like the model or effort picker) receive focus. So if a user opens a picker and then clicks outside to dismiss it, the blue border can stick around since focus remains on the trigger button.

Swapping to has-focus-visible (css :has(:focus-visible)) narrows this to keyboard-intent focus only. Buttons clicked with a mouse aren't marked as focus-visible, which avoids the border staying after dismissal. Clicking into the editor still shows the border since browsers treat editable elements as focus-visible.

UI Changes

Before

Before.mp4

After

After.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Low risk UI-only styling change that alters when the composer shows its focus border; main risk is inconsistent :has(:focus-visible) support or unintended focus styling regressions across browsers.

Overview
Updates the chat composer container styling in ChatView.tsx to use has-focus-visible:border-ring/45 instead of focus-within:border-ring/45, so the blue border highlight only appears for keyboard-visible focus and clears when pickers/toolbar buttons are dismissed via pointer.

^{Written by Cursor Bugbot for commit d7aabab. This will update automatically on new commits. Configure here.}

Note

Fix composer border highlight to clear on picker dismissal in ChatView

Changes the Tailwind variant on the composer container in ChatView.tsx from focus-within:border-ring/45 to has-focus-visible:border-ring/45. This ensures the border highlight only appears when a descendant has keyboard-visible focus, so it clears correctly when a picker (e.g. emoji picker) is dismissed via pointer.

^{Macroscope summarized d7aabab.}

[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: 3bb206bd-becd-482f-8161-b199652d2599

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

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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