fix: Remove rank on trending collection table (mobile) (#5086)

src/nft/components/explore/Explore.css.ts

@@ -43,20 +43,6 @@ export const bannerOverlay = style([
   }),
 ])
 
-export const collectionName = style([
-  sprinkles({
-    textAlign: 'left',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    display: 'inline-block',
-    color: 'explicitWhite',
-  }),
-  {
-    maxWidth: 'calc(100% - 80px)',
-  },
-])
-
 export const collectionDetails = style([
   sprinkles({
     width: 'full',
@@ -70,43 +56,6 @@ export const collectionDetails = style([
   },
 ])
 
-export const volumeRank = style([
-  sprinkles({
-    paddingTop: '8',
-    paddingBottom: '8',
-    paddingRight: '16',
-    paddingLeft: '16',
-    color: 'blue400',
-    background: 'accentActionSoft',
-  }),
-  {
-    borderRadius: '64px',
-    maxWidth: '172px',
-  },
-])
-
-export const exploreCollection = style([
-  {
-    width: '176px',
-  },
-  sprinkles({
-    color: 'explicitWhite',
-    marginTop: '36',
-    borderRadius: '12',
-    padding: '12',
-    paddingRight: '16',
-    paddingLeft: '16',
-  }),
-])
-
-export const carouselIndicator = sprinkles({
-  width: '36',
-  height: '4',
-  marginRight: '6',
-  borderRadius: 'round',
-  display: 'inline-block',
-})
-
 /* Activity Feed Styles */
 export const activityRow = style([
   sprinkles({
@@ -185,14 +134,6 @@ export const th = style([
   }),
 ])
 
-export const rank = sprinkles({
-  color: 'textSecondary',
-  position: 'absolute',
-  display: { md: 'inline-block', sm: 'none' },
-  left: '24',
-  top: '20',
-})
-
 export const td = style([
   body,
   {

src/nft/components/explore/Table.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { LoadingBubble } from 'components/Tokens/loading'
 import { useWindowSize } from 'hooks/useWindowSize'
+import { useIsMobile } from 'nft/hooks'
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Column, ColumnInstance, HeaderGroup, IdType, useSortBy, useTable } from 'react-table'
@@ -18,6 +19,9 @@ const RankCellContainer = styled.div`
   align-items: center;
   padding-left: 24px;
   gap: 12px;
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    padding-left: 8px;
+  }
 `
 
 const StyledRow = styled.tr`
@@ -95,6 +99,7 @@ export function Table<D extends Record<string, unknown>>({
 }: TableProps<D>) {
   const theme = useTheme()
   const { width } = useWindowSize()
+  const isMobile = useIsMobile()
 
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, setHiddenColumns, visibleColumns } =
     useTable(
@@ -146,7 +151,7 @@ export function Table<D extends Record<string, unknown>>({
                   {...column.getHeaderProps(column.getSortByToggleProps())}
                   style={{
                     textAlign: index === 0 ? 'left' : 'right',
-                    paddingLeft: index === 0 ? '52px' : 0,
+                    paddingLeft: index === 0 ? (isMobile ? '16px' : '52px') : 0,
                   }}
                   isFirstHeader={index === 0}
                   key={index}
@@ -186,9 +191,11 @@ export function Table<D extends Record<string, unknown>>({
                   <td className={clsx(styles.td, classNames?.td)} {...cell.getCellProps()} key={cellIndex}>
                     {cellIndex === 0 ? (
                       <RankCellContainer>
-                        <ThemedText.BodySecondary fontSize="14px" lineHeight="20px">
-                          {i + 1}
-                        </ThemedText.BodySecondary>
+                        {!isMobile && (
+                          <ThemedText.BodySecondary fontSize="14px" lineHeight="20px">
+                            {i + 1}
+                          </ThemedText.BodySecondary>
+                        )}
                         {cell.render('Cell')}
                       </RankCellContainer>
                     ) : (