Improve responsivness of desktop gallery

oasisprotocol · Dec 11, 2023 · 6efb046 · 6efb046
1 parent 02fd8f8
commit 6efb046
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/src/app/components/NoPreview/index.tsx b/src/app/components/NoPreview/index.tsx
@@ -18,6 +18,7 @@ export const NoPreview: FC<NoPreviewProps> = ({ placeholderSize }) => {
         height: placeholderSize,
         width: placeholderSize,
         display: 'flex',
+        flex: 1,
         justifyContent: 'center',
         flexDirection: 'column',
         alignItems: 'center',

diff --git a/src/app/pages/TokenDashboardPage/ImageListItemImage.tsx b/src/app/pages/TokenDashboardPage/ImageListItemImage.tsx
@@ -13,16 +13,16 @@ import { useScreenSize } from 'app/hooks/useScreensize'
 import { COLORS } from 'styles/theme/colors'
 
 const minMobileSize = '150px'
-const mobileSize = '100%'
-const imageSize = '210px'
+const minSize = '210px'
 
 const StyledImage = styled('img', {
   shouldForwardProp: prop => prop !== 'isMobile',
 })<{ isMobile: boolean }>(({ isMobile }) => ({
-  minWidth: isMobile ? minMobileSize : imageSize,
-  minHeight: isMobile ? minMobileSize : imageSize,
-  width: isMobile ? mobileSize : imageSize,
-  height: isMobile ? mobileSize : imageSize,
+  minWidth: isMobile ? minMobileSize : minSize,
+  minHeight: isMobile ? minMobileSize : minSize,
+  width: '100%',
+  height: '100%',
+  maxHeight: minSize,
   objectFit: 'cover',
   transition: 'opacity 250ms ease-in-out',
   '&:hover, &:focus-visible': {
@@ -68,7 +68,7 @@ export const ImageListItemImage: FC<ImageListItemImageProps> = ({ instance, to }
           isMobile={isMobile}
         />
       ) : (
-        <NoPreview placeholderSize={imageSize} />
+        <NoPreview placeholderSize={isMobile ? minMobileSize : minSize} />
       )}
       <StyledBox gap={3}>
         <OpenInBrowserIcon sx={{ fontSize: '40px' }} />

diff --git a/src/app/pages/TokenDashboardPage/NFTLinks.tsx b/src/app/pages/TokenDashboardPage/NFTLinks.tsx
@@ -4,6 +4,7 @@ import { Link as RouterLink } from 'react-router-dom'
 import { EvmNft } from 'oasis-nexus/api'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
 import { RouteUtils } from '../../utils/route-utils'
 import { SearchScope } from '../../../types/searchScope'
 import { trimLongString } from '../../utils/trimLongString'
@@ -13,12 +14,18 @@ type NFTLinkProps = {
   instance: EvmNft
 }
 
+const StyledTypography = styled(Typography)({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+})
+
 export const NFTCollectionLink: FC<NFTLinkProps> = ({ scope, instance }) => {
   const { t } = useTranslation()
   const to = RouteUtils.getTokenRoute(scope, instance.token?.contract_addr)
 
   return (
-    <Typography>
+    <StyledTypography>
       <Trans
         i18nKey="nft.collectionLink"
         t={t}
@@ -30,7 +37,7 @@ export const NFTCollectionLink: FC<NFTLinkProps> = ({ scope, instance }) => {
           ),
         }}
       />
-    </Typography>
+    </StyledTypography>
   )
 }
 
@@ -39,7 +46,7 @@ export const NFTInstanceLink: FC<NFTLinkProps> = ({ scope, instance }) => {
   const to = RouteUtils.getNFTInstanceRoute(scope, instance.token?.eth_contract_addr, instance.id)
 
   return (
-    <Typography>
+    <StyledTypography>
       <Trans
         i18nKey="nft.instanceIdLink"
         t={t}
@@ -51,6 +58,6 @@ export const NFTInstanceLink: FC<NFTLinkProps> = ({ scope, instance }) => {
           ),
         }}
       />
-    </Typography>
+    </StyledTypography>
   )
 }
diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
@@ -534,7 +534,7 @@ export const defaultTheme = createTheme({
           [theme.breakpoints.up('sm')]: {
             // default gridTemplateColumns is set by cols prop default number via inline styles
             // and cannot be overridden without !important statement
-            gridTemplateColumns: `repeat(auto-fill, minmax(210px, 210px))!important`,
+            gridTemplateColumns: `repeat(auto-fill, minmax(210px, auto))!important`,
           },
         }),
       },