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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user