Fix composer footer focus ring overflow

[juliusmarminge]

Summary

• Allow composer footer focus rings to render outside the clipped footer container.
• Split the chat composer into dedicated components to reduce ChatView complexity and isolate interaction state.
• Preserve composer trigger and draft state more reliably across prompt resets and new-thread flows.
• Keep provider locking and composer send-state derivation in shared logic instead of inline view code.

Testing

• Not run (PR content draft only).
• Expected checks in CI: bun fmt, bun lint, bun typecheck, and bun run test.

---

Note

Low Risk
Low risk UI/test-only changes: tweaks composer footer overflow and minor styling, plus updates browser panel tests to use future-dated sessions and accept updated button labeling.

Overview
Fixes chat composer footer focus ring clipping by changing the footer container from overflow-hidden to overflow-visible in ChatComposer.tsx, and slightly adjusts the runtime mode trigger styling (font-medium).

Updates SettingsPanels.browser.tsx browser tests to use far-future issuedAt/expiresAt timestamps and to tolerate a label change by matching the pairing-link action button as Copy or Show link.

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

Note

Fix focus ring clipping in the chat composer footer

Changes the composer footer container in ChatComposer.tsx from overflow-hidden to overflow-visible so focus rings on footer controls are no longer clipped. Also adds font-medium to the runtime mode SelectTrigger in ComposerFooterModeControls.

^{Macroscope summarized 91a2e92.}

[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: 8b555029-b2ad-43b0-a93a-9935d689c339

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/fix-focus-ring-overflow

---

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

[cursor]

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

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

• ✅ Fixed: Model picker filter inconsistent with effective locked provider
  • Replaced lockedProvider with effectiveLockedProvider in both the searchableModelOptions filter condition (line 615) and its memo dependency array (line 627) to match the selectedProvider derivation.

Or push these changes by commenting:

@cursor push ecb04b6094

Preview (ecb04b6094)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -612,7 +612,7 @@
     const searchableModelOptions = useMemo(
       () =>
         AVAILABLE_PROVIDER_OPTIONS.filter(
-          (option) => lockedProvider === null || option.value === lockedProvider,
+          (option) => effectiveLockedProvider === null || option.value === effectiveLockedProvider,
         ).flatMap((option) =>
           modelOptionsByProvider[option.value].map(({ slug, name }) => ({
             provider: option.value,
@@ -624,7 +624,7 @@
             searchProvider: option.label.toLowerCase(),
           })),
         ),
-      [lockedProvider, modelOptionsByProvider],
+      [effectiveLockedProvider, modelOptionsByProvider],
     );
 
     // ------------------------------------------------------------------

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

^{Reviewed by Cursor Bugbot for commit 36b481f. Configure here.}

[macroscopeapp]

Approvability

Verdict: Approved

This PR contains a minor CSS fix (changing overflow-hidden to overflow-visible to prevent focus ring clipping) and test maintenance (updating fixture dates to 2036 to future-proof tests). Changes are purely visual/test-related with no runtime logic impact.

^{You can customize Macroscope's approvability policy. Learn more.}