From 55e9dc325531533fde20b54a58c4399ec9b1512d Mon Sep 17 00:00:00 2001
From: agent-linusswartz <agent-linusswartz@users.noreply.github.com>
Date: Thu, 30 Jul 2026 14:42:06 -0300
Subject: [PATCH] fix(tabs): remove close hover fill

---
 index.html                           | 13 ++++++-----
 scripts/validate-browser-quality.mjs | 33 ++++++++++++++++++++++++++++
 src/styles/03-components.css         | 13 ++++++-----
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index ee3c9cd..b3e6601 100644
--- a/index.html
+++ b/index.html
@@ -2079,7 +2079,7 @@
       align-items: center;
       justify-content: flex-end;
       gap: 0;
-      padding-right: 3px;
+      padding-right: 4px;
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
@@ -2117,21 +2117,22 @@
 
 .sql-tab-actions-portal .ui-button.sql-tab-inline-action:hover {
 border: 0;
-      background: color-mix(in srgb, var(--danger) 12%, var(--input-bg));
+      background: transparent;
       color: var(--danger);
       box-shadow: none;
 }
 
 .sql-tab-actions-portal .ui-button.sql-tab-inline-rename:hover {
-background: color-mix(in srgb, var(--info) 10%, var(--input-bg));
+background: transparent;
       color: var(--foreground);
 }
 
 .sql-tab-actions-portal .ui-button.sql-tab-inline-action:focus-visible {
 border: 0;
-      outline: none;
-      background: color-mix(in srgb, var(--ring) 10%, var(--input-bg));
-      box-shadow: inset 0 0 0 2px var(--ring);
+      outline: 2px solid var(--ring);
+      outline-offset: 1px;
+      background: transparent;
+      box-shadow: none;
 }
 
 .sql-tab-header-action {
diff --git a/scripts/validate-browser-quality.mjs b/scripts/validate-browser-quality.mjs
index eada5c9..5d0e66b 100644
--- a/scripts/validate-browser-quality.mjs
+++ b/scripts/validate-browser-quality.mjs
@@ -556,6 +556,39 @@ try {
       const closeTabAction = page.locator(".sql-tab-actions-portal.active [data-tab-close-id]");
       const renameTabAction = page.locator(".sql-tab-actions-portal.active [data-tab-rename-id]");
       const closeAllTabsAction = page.locator("#closeAllTabsBtn");
+      const tabActionTarget = await closeTabAction.evaluate(element => {
+        const targetRect = element.getBoundingClientRect();
+        return {
+          targetWidth: Math.round(targetRect.width),
+          targetHeight: Math.round(targetRect.height)
+        };
+      });
+      assert(
+        tabActionTarget?.targetWidth === 26 && tabActionTarget.targetHeight === 26,
+        `${locale.tag}/${viewport.name}: inline close target is not 26 by 26 CSS pixels (${JSON.stringify(tabActionTarget)}).`
+      );
+      await closeTabAction.hover();
+      const closeHoverFeedback = await closeTabAction.evaluate(element => {
+        const resolveColor = (value) => {
+          const probe = document.createElement("span");
+          probe.style.color = value;
+          document.body.appendChild(probe);
+          const resolved = getComputedStyle(probe).color;
+          probe.remove();
+          return resolved;
+        };
+        const styles = getComputedStyle(element);
+        return {
+          backgroundColor: styles.backgroundColor,
+          color: styles.color,
+          expectedDanger: resolveColor(getComputedStyle(document.documentElement).getPropertyValue("--danger"))
+        };
+      });
+      assert(
+        closeHoverFeedback.backgroundColor === "rgba(0, 0, 0, 0)"
+          && closeHoverFeedback.color === closeHoverFeedback.expectedDanger,
+        `${locale.tag}/${viewport.name}: close hover must keep a transparent hit target and color only the X (${JSON.stringify(closeHoverFeedback)}).`
+      );
       const newTabPlacement = await page.locator("#newSqlTabBtn").evaluate(element => {
         const lastTabItem = document.querySelector("#sqlTabs .sql-tab-item:last-child");
         if (!lastTabItem) return null;
diff --git a/src/styles/03-components.css b/src/styles/03-components.css
index b763412..158ddcc 100644
--- a/src/styles/03-components.css
+++ b/src/styles/03-components.css
@@ -1625,7 +1625,7 @@ display: inline-flex;
       align-items: center;
       justify-content: flex-end;
       gap: 0;
-      padding-right: 3px;
+      padding-right: 4px;
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
@@ -1663,21 +1663,22 @@ width: 26px;
 
 .sql-tab-actions-portal .ui-button.sql-tab-inline-action:hover {
 border: 0;
-      background: color-mix(in srgb, var(--danger) 12%, var(--input-bg));
+      background: transparent;
       color: var(--danger);
       box-shadow: none;
 }
 
 .sql-tab-actions-portal .ui-button.sql-tab-inline-rename:hover {
-background: color-mix(in srgb, var(--info) 10%, var(--input-bg));
+background: transparent;
       color: var(--foreground);
 }
 
 .sql-tab-actions-portal .ui-button.sql-tab-inline-action:focus-visible {
 border: 0;
-      outline: none;
-      background: color-mix(in srgb, var(--ring) 10%, var(--input-bg));
-      box-shadow: inset 0 0 0 2px var(--ring);
+      outline: 2px solid var(--ring);
+      outline-offset: 1px;
+      background: transparent;
+      box-shadow: none;
 }
 
 .sql-tab-header-action {