From de799c3a7b70304624789d9365229b9e5bd1d4cd Mon Sep 17 00:00:00 2001
From: Codex Agent <agent@example.com>
Date: Mon, 9 Mar 2026 18:46:58 +0000
Subject: [PATCH] Fix category tooltip layering and placement

---
 hdyc-svelte/src/app.css                                 | 8 +++++---
 hdyc-svelte/src/routes/category/[category]/+page.svelte | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/hdyc-svelte/src/app.css b/hdyc-svelte/src/app.css
index ddf9747..daf821a 100644
--- a/hdyc-svelte/src/app.css
+++ b/hdyc-svelte/src/app.css
@@ -669,7 +669,7 @@ a:focus-visible {
 
 .calc-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 0.75rem;
 }
 .calc-list-item {
@@ -692,11 +692,13 @@ a:focus-visible {
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   color: var(--accent);
+  z-index: 20;
 }
 .calc-list-item:focus-visible {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-glow);
+  z-index: 20;
 }
 .calc-list-tooltip {
   position: absolute;
@@ -714,7 +716,7 @@ a:focus-visible {
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
-  transform: translate(-50%, var(--calc-tooltip-translate, -0.35rem));
+  transform: translate(-50%, calc(var(--calc-tooltip-translate, -0.35rem) + 0.15rem));
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
   white-space: nowrap;
   z-index: 10;
@@ -723,7 +725,7 @@ a:focus-visible {
 .calc-list-item:focus-visible .calc-list-tooltip {
   opacity: 1;
   visibility: visible;
-  transform: translate(-50%, 0);
+  transform: translate(-50%, var(--calc-tooltip-translate, -0.35rem));
 }
 
 /* ─── Related Converters ─────────────────────────────────── */
diff --git a/hdyc-svelte/src/routes/category/[category]/+page.svelte b/hdyc-svelte/src/routes/category/[category]/+page.svelte
index cef971d..a12da38 100644
--- a/hdyc-svelte/src/routes/category/[category]/+page.svelte
+++ b/hdyc-svelte/src/routes/category/[category]/+page.svelte
@@ -12,7 +12,7 @@
     card.style.setProperty('--calc-tooltip-left', `${x}px`);
     card.style.setProperty('--calc-tooltip-top', `${y}px`);
     card.style.setProperty('--calc-tooltip-bottom', 'auto');
-    card.style.setProperty('--calc-tooltip-translate', 'calc(-100% - 0.4rem)');
+    card.style.setProperty('--calc-tooltip-translate', 'calc(-100% - 0.55rem)');
   };
 
   const resetCalcTooltipPosition = (event: MouseEvent) => {