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
This commit is contained in:
2026-09-06 12:26:21 -04:00
parent 54debe4b0a
commit 4786973558
2 changed files with 6 additions and 7 deletions
@@ -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">
@@ -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>