feat: [DetailsV2] Mobile support for traits (#6535)

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/details/detailsV2/DataPageTraits.tsx

@@ -6,7 +6,7 @@ import { useSubscribeScrollState } from 'nft/hooks'
 import { GenieAsset } from 'nft/types'
 import { useMemo } from 'react'
 import styled from 'styled-components/macro'
-import { ThemedText } from 'theme'
+import { BREAKPOINTS, ThemedText } from 'theme'
 import { opacify } from 'theme/utils'
 
 import { Tab, TabbedComponent } from './TabbedComponent'
@@ -16,12 +16,20 @@ const TraitsHeaderContainer = styled(Row)`
   padding-right: 12px;
 `
 
-const TraitsHeader = styled(ThemedText.SubHeaderSmall)<{ $flex?: number; $justifyContent?: string }>`
+const TraitsHeader = styled(ThemedText.SubHeaderSmall)<{
+  $flex?: number
+  $justifyContent?: string
+  hideOnSmall?: boolean
+}>`
   display: flex;
   line-height: 20px;
   color: ${({ theme }) => theme.textSecondary};
   flex: ${({ $flex }) => $flex ?? 1};
   justify-content: ${({ $justifyContent }) => $justifyContent};
+
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
+    display: ${({ hideOnSmall }) => (hideOnSmall ? 'none' : 'flex')};
+  }
 `
 
 const TraitRowContainer = styled.div`
@@ -76,7 +84,7 @@ const TraitsContent = ({ asset }: { asset: GenieAsset }) => {
         <TraitsHeader $flex={2}>
           <Trans>Floor price</Trans>
         </TraitsHeader>
-        <TraitsHeader>
+        <TraitsHeader hideOnSmall={true}>
           <Trans>Quantity</Trans>
         </TraitsHeader>
         <TraitsHeader $flex={1.5} $justifyContent="flex-end">

src/nft/components/details/detailsV2/TraitRow.tsx

@@ -5,7 +5,7 @@ import { formatEth } from 'nft/utils'
 import qs from 'qs'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
-import { ThemedText } from 'theme'
+import { BREAKPOINTS, ThemedText } from 'theme'
 
 import { getRarityLevel, RarityGraph } from './RarityGraph'
 
@@ -43,12 +43,16 @@ const TraitColumnValue = styled(Column)<{ $flex?: number; $alignItems?: string }
   align-items: ${({ $alignItems }) => $alignItems};
 `
 
-const TraitRowValue = styled(ThemedText.BodySmall)<{ $flex?: number; $justifyContent?: string }>`
+const TraitRowValue = styled(ThemedText.BodySmall)<{ $flex?: number; $justifyContent?: string; hideOnSmall?: boolean }>`
   display: flex;
   line-height: 20px;
   padding-top: 20px;
   flex: ${({ $flex }) => $flex ?? 1};
   justify-content: ${({ $justifyContent }) => $justifyContent};
+
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
+    display: ${({ hideOnSmall }) => (hideOnSmall ? 'none' : 'flex')};
+  }
 `
 
 export const TraitRow = ({ trait, collectionAddress }: { trait: Trait; collectionAddress: string }) => {
@@ -70,7 +74,7 @@ export const TraitRow = ({ trait, collectionAddress }: { trait: Trait; collectio
           <ThemedText.BodyPrimary lineHeight="20px">{trait.trait_value}</ThemedText.BodyPrimary>
         </TraitColumnValue>
         <TraitRowValue $flex={2}>{formatEth(randomRarity * 1000)} ETH</TraitRowValue>
-        <TraitRowValue>{Math.round(randomRarity * 10000)}</TraitRowValue>
+        <TraitRowValue hideOnSmall={true}>{Math.round(randomRarity * 10000)}</TraitRowValue>
         <TraitColumnValue $flex={1.5} $alignItems="flex-end">
           <SubheaderTinyHidden $color={rarityLevel.color}>{rarityLevel.caption}</SubheaderTinyHidden>
           <RarityGraph trait={trait} rarity={randomRarity} />

src/nft/components/details/detailsV2/__snapshots__/DataPageTraits.test.tsx.snap

@@ -174,6 +174,39 @@ exports[`data page trait component does not load with asset with no traits 1`] =
   border-radius: 8px;
 }
 
+@media screen and (max-width:640px) {
+  .c10 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+@media screen and (max-width:640px) {
+  .c11 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+@media screen and (max-width:640px) {
+  .c12 {
+    display: none;
+  }
+}
+
+@media screen and (max-width:640px) {
+  .c13 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
 <div
     class="c0"
   >