peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(panels): stop the tab bleeding through the card's rounded corner

Browse Source 
The tab stays mounted under the open card on purpose, but the card's 17px corner
radius cuts away its own pixels and the tab's square docked corner sits right
under that arc — showing a hairline of tab glass. Fade the tab out while the
card is open; opacity-0 rather than invisible/hidden, so it stays hoverable and
focusable (that is the whole reason it stays mounted).
This commit is contained in:
peter
2026-07-15 21:44:22 +02:00
parent 532a1c2842
commit 3596d83acd
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SidePanel.tsx
+8 -6
View File
@@ -52,15 +52,17 @@ export default function SidePanel({
}`}
>
{/* The tab: a small handle flush against the nav rail, flat on the docked edge. It stays
mounted while the card is open (the card shares its top-left corner and covers it) —
swapping it out from under the pointer would drop the very hover that opened the card, and
unmounting it while focused would throw keyboard focus to nowhere. */}
mounted while the card is open — swapping it out from under the pointer would drop the very
hover that opened the card, and unmounting it while focused would throw keyboard focus to
nowhere. It only goes transparent: the card's rounded corner cuts away its own pixels, and
this square-cornered tab sits right under that arc, so it would otherwise bleed through.
`opacity-0` (not `invisible`/`hidden`) keeps it hoverable and focusable. */}
<button
onClick={onToggleCollapse}
aria-label={pinned ? t("sidebar.unpin") : t("sidebar.pin")}
className={`glass glass-hover absolute top-3 left-0 z-[34] flex flex-col items-center gap-2 px-1.5 py-3 rounded-l-none rounded-r-xl ${
count > 0 ? "ring-1 ring-accent/40" : ""
}`}
className={`glass glass-hover absolute top-3 left-0 z-[34] flex flex-col items-center gap-2 px-1.5 py-3 rounded-l-none rounded-r-xl transition-opacity ${
expanded ? "opacity-0" : ""
} ${count > 0 ? "ring-1 ring-accent/40" : ""}`}
>
<span className="text-accent">{icon}</span>
{count > 0 && (