From 14f14d34bd91dd8ae97cb8b61723b92f25df986f Mon Sep 17 00:00:00 2001
From: hansjone <zhoutianjun127@gmail.com>
Date: Thu, 30 Jul 2026 02:34:25 +0000
Subject: [PATCH] fix(webcrt): remove tab close border by dropping button
 chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Global app button styles forced a boxed ×; use an inline span so it reads as part of the device name.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/index.css            | 27 +++++++++++++--------------
 web/src/pages/WebcrtPage.tsx | 14 +++++++++++---
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index f0fc0dd..f050d25 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1703,31 +1703,30 @@ pre {
   font-weight: 600;
 }
 
+/* span close mark — avoid global `button` border/padding chrome */
 .webcrt-tabs__close {
-  appearance: none;
-  -webkit-appearance: none;
   display: inline;
   margin: 0;
-  margin-left: 2px;
   padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
+  border: none;
+  background: none;
   box-shadow: none;
   outline: none;
   cursor: pointer;
   font: inherit;
-  font-weight: 400;
-  font-size: 1em;
-  line-height: 1;
+  font-weight: inherit;
+  line-height: inherit;
   color: inherit;
-  opacity: 0.45;
-  vertical-align: baseline;
+  opacity: 0.4;
 }
 
-.webcrt-tabs__close:hover,
-.webcrt-tabs__item:hover .webcrt-tabs__close {
-  opacity: 0.85;
+.webcrt-tabs__close::before {
+  content: " ";
+}
+
+.webcrt-tabs__item:hover .webcrt-tabs__close,
+.webcrt-tabs__close:hover {
+  opacity: 0.75;
 }
 
 .webcrt-tabs__close:focus-visible {
diff --git a/web/src/pages/WebcrtPage.tsx b/web/src/pages/WebcrtPage.tsx
index 9e78f5c..d075933 100644
--- a/web/src/pages/WebcrtPage.tsx
+++ b/web/src/pages/WebcrtPage.tsx
@@ -390,17 +390,25 @@ export function WebcrtPage() {
                   <span>
                     {deviceLabel(tab.target)}
                     {tab.status === "connecting" ? ` (${t("webcrt.status.connecting")})` : ""}
-                    <button
-                      type="button"
+                    <span
+                      role="button"
+                      tabIndex={0}
                       className="webcrt-tabs__close"
                       aria-label={t("webcrt.disconnect")}
                       onClick={(e) => {
                         e.stopPropagation();
                         void closeTab(tab.key);
                       }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          void closeTab(tab.key);
+                        }
+                      }}
                     >
                       ×
-                    </button>
+                    </span>
                   </span>
                 </div>
               ))}