ben/HowDoYouConvert
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix category tooltip layering and placement

Browse Source
This commit is contained in:
Codex Agent
2026-03-09 18:46:58 +00:00
parent b1bf3f40d8
commit de799c3a7b
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
hdyc-svelte/src/app.css
View File

@@ -669,7 +669,7 @@ a:focus-visible {
.calc-list { .calc-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.75rem; gap: 0.75rem;
} }
.calc-list-item { .calc-list-item {
@@ -692,11 +692,13 @@ a:focus-visible {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
color: var(--accent); color: var(--accent);
z-index: 20;
} }
.calc-list-item:focus-visible { .calc-list-item:focus-visible {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow);
z-index: 20;
} }
.calc-list-tooltip { .calc-list-tooltip {
position: absolute; position: absolute;
@@ -714,7 +716,7 @@ a:focus-visible {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
visibility: hidden; 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; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
white-space: nowrap; white-space: nowrap;
z-index: 10; z-index: 10;
@@ -723,7 +725,7 @@ a:focus-visible {
.calc-list-item:focus-visible .calc-list-tooltip { .calc-list-item:focus-visible .calc-list-tooltip {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transform: translate(-50%, 0); transform: translate(-50%, var(--calc-tooltip-translate, -0.35rem));
} }
/* ─── Related Converters ─────────────────────────────────── */ /* ─── Related Converters ─────────────────────────────────── */

2
hdyc-svelte/src/routes/category/[category]/+page.svelte
View File

@@ -12,7 +12,7 @@
card.style.setProperty('--calc-tooltip-left', `${x}px`); card.style.setProperty('--calc-tooltip-left', `${x}px`);
card.style.setProperty('--calc-tooltip-top', `${y}px`); card.style.setProperty('--calc-tooltip-top', `${y}px`);
card.style.setProperty('--calc-tooltip-bottom', 'auto'); 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) => { const resetCalcTooltipPosition = (event: MouseEvent) => {