From 839606cbbfebd4a915585e9212fd2f3b6d887038 Mon Sep 17 00:00:00 2001
From: Jerel John Velarde <jerel@copilotkit.ai>
Date: Tue, 29 Sep 2026 03:58:17 -0700
Subject: [PATCH] Drop the browser focus ring inside the chat composer

The composer pill already signals focus by tinting its border, so Chrome's
focus ring on the textarea drew a second, square box inside the rounded pill.
Chrome paints outline-style auto at any width, so the fix sets outline-style
none on web only.
---
 apps/mobile/src/chat.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/mobile/src/chat.tsx b/apps/mobile/src/chat.tsx
index 683332b10..e6a3d5432 100644
--- a/apps/mobile/src/chat.tsx
+++ b/apps/mobile/src/chat.tsx
@@ -16,6 +16,7 @@ import {
   ScrollView,
   Text,
   TextInput,
+  type TextStyle,
   View,
 } from "react-native";
 import { z } from "zod";
@@ -34,6 +35,11 @@ import { Button, Card, CheckRow, colors, ErrorNotice, s } from "./ui";
 import { useWorkspace } from "./workspace";
 
 const displayParameters = z.record(z.string(), z.unknown());
+// The composer pill shows focus with its border, so the browser's ring inside it is noise.
+// Chrome draws `outline-style: auto` at any width, so only `none` removes it; React Native's
+// types omit that value, but react-native-web passes it through.
+const noFocusRing =
+  Platform.OS === "web" ? ({ outlineStyle: "none" } as unknown as TextStyle) : undefined;
 export function WorkspaceTools() {
   const { workspace, section } = useWorkspace();
   useAgentContext({
@@ -749,6 +755,7 @@ export function ChatScreen({
                 paddingHorizontal: 2,
                 paddingTop: 10,
                 paddingBottom: 10,
+                ...noFocusRing,
               }}
               multiline
               editable