From e38e7344b40111b053bbd4fd010ccfa60b5d39c7 Mon Sep 17 00:00:00 2001
From: ScottMorris <404967+ScottMorris@users.noreply.github.com>
Date: Fri, 27 Feb 2026 07:03:37 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20tab=20close?=
 =?UTF-8?q?=20button=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced the text-based "×" close button on tabs with the `XMarkIcon` SVG for better visual consistency and accessibility. Also removed padding from the button to better center the new icon.

- Replaced "×" text with `<XMarkIcon />` in `Tab.tsx`
- Added `aria-label="Close tab"` for accessibility
- Removed padding from `.tab-close` in `App.css`
---
 apps/desktop/src/App.css                   | 2 +-
 apps/desktop/src/components/Editor/Tab.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/App.css b/apps/desktop/src/App.css
index 5b8d832..03f71da 100644
--- a/apps/desktop/src/App.css
+++ b/apps/desktop/src/App.css
@@ -422,7 +422,7 @@ button:disabled {
   border: none;
   color: inherit;
   font-size: 1.1rem;
-  padding: 0 4px;
+  padding: 0;
   border-radius: 50%;
   opacity: 0.6;
   display: flex;
diff --git a/apps/desktop/src/components/Editor/Tab.tsx b/apps/desktop/src/components/Editor/Tab.tsx
index c1cc29d..fe37e6b 100644
--- a/apps/desktop/src/components/Editor/Tab.tsx
+++ b/apps/desktop/src/components/Editor/Tab.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { OpenTab } from '../../types/tabs';
+import { XMarkIcon } from '../Icons';
 
 interface TabProps {
   tab: OpenTab;
@@ -34,8 +35,9 @@ export function Tab({ tab, isActive, onSelect, onClose, onDoubleClick, onContext
           onClose(e);
         }}
         title="Close Tab"
+        aria-label="Close tab"
       >
-        ×
+        <XMarkIcon size={12} />
       </button>
     </div>
   );