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 {
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 ─────────────────────────────────── */

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-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) => {