Prevent native mobile context menu

src/modules/manga/components/cards/MangaGridCard.tsx

@@ -22,6 +22,7 @@ import { SpecificMangaCardProps } from '@/modules/manga/Manga.types.ts';
 import { TypographyMaxLines } from '@/modules/core/components/texts/TypographyMaxLines.tsx';
 import { MANGA_COVER_ASPECT_RATIO } from '@/modules/manga/Manga.constants.ts';
 import { GridLayout } from '@/modules/core/Core.types.ts';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 
 const BottomGradient = styled('div')({
     position: 'absolute',
@@ -55,6 +56,7 @@ export const MangaGridCard = memo(
         mangaBadges,
         mode,
     }: SpecificMangaCardProps) => {
+        const preventMobileContextMenu = MediaQuery.usePreventMobileContextMenu();
         const optionButtonRef = useRef<HTMLButtonElement>(null);
 
         const { id, title } = manga;
@@ -66,7 +68,11 @@ export const MangaGridCard = memo(
                 onClick={handleClick}
                 to={mangaLinkTo}
                 state={Mangas.createLocationState(manga, mode)}
-                sx={{ textDecoration: 'none', userSelect: 'none' }}
+                onContextMenu={preventMobileContextMenu}
+                sx={{
+                    ...MediaQuery.preventMobileContextMenuSx(),
+                    textDecoration: 'none',
+                }}
             >
                 <Box
                     sx={{

src/modules/manga/components/cards/MangaListCard.tsx

@@ -19,6 +19,7 @@ import { Mangas } from '@/modules/manga/services/Mangas.ts';
 import { MangaOptionButton } from '@/modules/manga/components/MangaOptionButton.tsx';
 import { ListCardAvatar } from '@/modules/core/components/lists/cards/ListCardAvatar.tsx';
 import { ListCardContent } from '@/modules/core/components/lists/cards/ListCardContent';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 
 export const MangaListCard = memo(
     ({
@@ -35,6 +36,8 @@ export const MangaListCard = memo(
         mangaBadges,
         mode,
     }: SpecificMangaCardProps) => {
+        const preventMobileContextMenu = MediaQuery.usePreventMobileContextMenu();
+
         const optionButtonRef = useRef<HTMLButtonElement>(null);
 
         const { id, title } = manga;
@@ -47,8 +50,9 @@ export const MangaListCard = memo(
                     state={Mangas.createLocationState(manga, mode)}
                     onClick={handleClick}
                     {...longPressBind(() => popupState.open(optionButtonRef.current))}
+                    onContextMenu={preventMobileContextMenu}
                     sx={{
-                        userSelect: 'none',
+                        ...MediaQuery.preventMobileContextMenuSx(),
                         '@media (hover: hover) and (pointer: fine)': {
                             '&:hover .manga-option-button': {
                                 visibility: 'visible',