remove zoom on mobile

ui/shared/nft/NftHtml.tsx

 import { chakra, LinkOverlay } from '@chakra-ui/react';
 import React from 'react';
 
+import { mediaStyleProps } from './utils';
+
 interface Props {
   src: string;
   onLoad: () => void;
@@ -12,13 +14,7 @@ const NftHtml = ({ src, onLoad, onError, onClick }: Props) => {
   return (
     <LinkOverlay
       onClick={ onClick }
-      cursor="pointer"
-      transitionProperty="transform"
-      transitionDuration="normal"
-      transitionTimingFunction="ease"
-      _hover={{
-        transform: 'scale(1.2)',
-      }}
+      { ...mediaStyleProps }
     >
       <chakra.iframe
         src={ src }

ui/shared/nft/NftImage.tsx

 import { Image } from '@chakra-ui/react';
 import React from 'react';
 
+import { mediaStyleProps } from './utils';
+
 interface Props {
   src: string;
   onLoad: () => void;
@@ -18,13 +20,7 @@ const NftImage = ({ src, onLoad, onError, onClick }: Props) => {
       onError={ onError }
       onLoad={ onLoad }
       onClick={ onClick }
-      transitionProperty="transform"
-      transitionDuration="normal"
-      transitionTimingFunction="ease"
-      cursor="pointer"
-      _hover={{
-        transform: 'scale(1.2)',
-      }}
+      { ...mediaStyleProps }
     />
   );
 };

ui/shared/nft/NftMedia.pw.tsx

@@ -41,18 +41,27 @@ test.describe('image', () => {
 
     await expect(component).toHaveScreenshot();
   });
+});
 
-  test('preview hover', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia url={ MEDIA_URL }/>
-      </TestApp>,
-    );
-
-    await component.hover();
+test('image preview hover', async({ mount, page }) => {
+  const MEDIA_URL = 'https://localhost:3000/my-image.jpg';
 
-    await expect(component).toHaveScreenshot();
+  await page.route(MEDIA_URL, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/mocks/image_long.jpg',
+    });
   });
+
+  const component = await mount(
+    <TestApp>
+      <NftMedia url={ MEDIA_URL } w="250px"/>
+    </TestApp>,
+  );
+
+  await component.getByAltText('Token instance image').hover();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 250, height: 250 } });
 });
 
 test('image fullscreen +@dark-mode +@mobile', async({ mount, page }) => {
@@ -104,16 +113,4 @@ test.describe('page', () => {
 
     await expect(component).toHaveScreenshot();
   });
-
-  test('preview hover', async({ mount }) => {
-    const component = await mount(
-      <TestApp>
-        <NftMedia url={ MEDIA_URL }/>
-      </TestApp>,
-    );
-
-    await component.hover();
-
-    await expect(component).toHaveScreenshot();
-  });
 });

ui/shared/nft/NftVideo.tsx

 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import { mediaStyleProps } from './utils';
+
 interface Props {
   src: string;
   onLoad: () => void;
@@ -21,13 +23,7 @@ const NftVideo = ({ src, onLoad, onError, onClick }: Props) => {
       onError={ onError }
       borderRadius="md"
       onClick={ onClick }
-      transitionProperty="transform"
-      transitionDuration="normal"
-      transitionTimingFunction="ease"
-      cursor="pointer"
-      _hover={{
-        transform: 'scale(1.2)',
-      }}
+      { ...mediaStyleProps }
     />
   );
 };

ui/shared/nft/utils.ts

@@ -26,3 +26,16 @@ export function getPreliminaryMediaType(url: string): MediaType | undefined {
     return 'video';
   }
 }
+
+export const mediaStyleProps = {
+  transitionProperty: 'transform',
+  transitionDuration: 'normal',
+  transitionTimingFunction: 'ease',
+  cursor: 'pointer',
+  _hover: {
+    base: {},
+    lg: {
+      transform: 'scale(1.2)',
+    },
+  },
+};