From 47869735586a76f5c536c3cf1eff8ca7edc3af64 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sun, 6 Sep 2026 12:26:21 -0400
Subject: [PATCH] fix(dashboard): use explicit open/close for hover summary
 slide

The summary sheet was driven by onMouseOver/onMouseOut both wired to
bare onToggle. Those events bubble, so moving between the image, title
and status text (or the sheet sliding in under the cursor) fired
unbalanced toggles - parity flipped and the sheet stuck open or showed
inverted. This predates the v3 migration.

- ContextMenu card Box now owns the hover zone with non-bubbling
  onMouseEnter={onOpen} / onMouseLeave={onClose} from useDisclosure,
  covering the whole card including the rating row instead of just the
  inner link
- Drop the onToggle prop from GameThumbnail and the over/out handlers
  on its Link
- Give the right-click Menu.Content p={4} for breathing room
---
 src/components/dashboardComponents/GameThumbnail.tsx      | 5 +----
 .../dashboardComponents/GameThumbnailContextMenu.tsx      | 8 +++++---
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/dashboardComponents/GameThumbnail.tsx b/src/components/dashboardComponents/GameThumbnail.tsx
index 26a9994..fbe750c 100644
--- a/src/components/dashboardComponents/GameThumbnail.tsx
+++ b/src/components/dashboardComponents/GameThumbnail.tsx
@@ -7,11 +7,10 @@ import SteamAndDeckLogo from "../helperComponents/SteamAndDeckLogo";
 
 interface Props {
     game: Data
-    onToggle: () => void
     playState: string
 }
 
-export default function GameThumbnail({ onToggle, game, playState }: Props) {
+export default function GameThumbnail({ game, playState }: Props) {
 
     const gameLink = game.accessedBy[0].store.includes('Steam') && game.steamId.length > 0 ? game.steamId : game._id
     return (
@@ -21,8 +20,6 @@ export default function GameThumbnail({ onToggle, game, playState }: Props) {
             >
                 <Link
                     to={`/games/${gameLink}`}
-                    onMouseOver={onToggle}
-                    onMouseOut={onToggle}
                 >
                     <Image borderTopRadius="md" src={game.frontImage} alt={game.title} />
                     <Heading m={2} size="md" my="2">
diff --git a/src/components/dashboardComponents/GameThumbnailContextMenu.tsx b/src/components/dashboardComponents/GameThumbnailContextMenu.tsx
index 618e060..c61845d 100644
--- a/src/components/dashboardComponents/GameThumbnailContextMenu.tsx
+++ b/src/components/dashboardComponents/GameThumbnailContextMenu.tsx
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const GameThumbnailContextMenu = ({ game }: Props) => {
-    const { open: isOpen, onToggle } = useDisclosure()
+    const { open: isOpen, onOpen, onClose } = useDisclosure()
     const [playState, setPlayState] = useState(game.accessedBy[0].playStatus)
     const gameLink = game.steamId.length > 1 ? game.steamId : game._id
 
@@ -44,13 +44,15 @@ const GameThumbnailContextMenu = ({ game }: Props) => {
                     transitionDuration={'1'}
                     transitionTimingFunction={'ease-in-out'}
                     _hover={{ boxShadow: '2xl', transform: 'translateY(-3px)' }}
+                    onMouseEnter={onOpen}
+                    onMouseLeave={onClose}
                 >
-                    <GameThumbnail onToggle={onToggle} game={game} playState={playState} />
+                    <GameThumbnail game={game} playState={playState} />
                 </Box>
             </Menu.ContextTrigger>
             <Portal>
                 <Menu.Positioner>
-                    <Menu.Content>
+                    <Menu.Content p={4}>
                         <Menu.Item value="open-new-tab" asChild>
                             <Link to={`/games/${gameLink}`} target="_blank" rel="noopener noreferrer">Open in New Tab</Link>
                         </Menu.Item>