From e56d6e3978a633a61cf9a0b952c72db41d371762 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 5 Aug 2026 12:55:13 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20tooltip=20to=20?=
 =?UTF-8?q?disabled=20Match=20All=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: jspann21 <179991454+jspann21@users.noreply.github.com>
---
 .jules/palette.md                             |  3 +++
 .../components/UnresolvedFilesSection.tsx     | 19 ++++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index e69de29..8c57214 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-02-05 - Disabled Tooltip Best Practices
+**Learning:** Native disabled buttons swallow mouse events, preventing tooltips (like the `title` attribute) from displaying. Wrapping the disabled element in a span and setting `disabled:pointer-events-none` on the element along with `cursor-not-allowed` on the parent span restores both hover tooltips and correct cursor behavior without breaking accessibility or layout.
+**Action:** Use this span-wrapper pattern combined with Tailwind's `disabled:pointer-events-none` and `cursor-not-allowed` for all disabled buttons that require explanatory tooltips.
diff --git a/src/features/library/components/UnresolvedFilesSection.tsx b/src/features/library/components/UnresolvedFilesSection.tsx
index 8f616e6..abaf24f 100644
--- a/src/features/library/components/UnresolvedFilesSection.tsx
+++ b/src/features/library/components/UnresolvedFilesSection.tsx
@@ -165,14 +165,19 @@ export function UnresolvedFilesSection({
                             </button>
                         ) : null}
                     </div>
-                    <button
-                        className="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:opacity-50"
-                        disabled={isAttemptMatchPending || isAttemptMatchAllPending || discoveredItems.length === 0}
-                        onClick={onAttemptMatchAll}
+                    <span
+                        className={cx('inline-flex', (isAttemptMatchPending || isAttemptMatchAllPending || discoveredItems.length === 0) && 'cursor-not-allowed')}
+                        title={isAttemptMatchAllPending || isAttemptMatchPending ? 'Matching in progress' : discoveredItems.length === 0 ? 'No unresolved files to match' : undefined}
                     >
-                        <RefreshCw size={14} className={cx(isAttemptMatchAllPending && 'animate-spin')} />
-                        {isAttemptMatchAllPending ? 'Matching All...' : 'Match All'}
-                    </button>
+                        <button
+                            className="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:pointer-events-none disabled:opacity-50"
+                            disabled={isAttemptMatchPending || isAttemptMatchAllPending || discoveredItems.length === 0}
+                            onClick={onAttemptMatchAll}
+                        >
+                            <RefreshCw size={14} className={cx(isAttemptMatchAllPending && 'animate-spin')} />
+                            {isAttemptMatchAllPending ? 'Matching All...' : 'Match All'}
+                        </button>
+                    </span>
                 </div>
             </div>