fix: use padding component (#6579)

* fix: rm unused const

* use component

* update snapshot

---------
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

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

@@ -52,6 +52,7 @@ const LeftColumn = styled(Column)`
 
 export const DataPage = ({ asset }: { asset: GenieAsset }) => {
   return (
+    <DataPagePaddingContainer>
       <DataPageContainer>
         <DataPageHeader asset={asset} />
         <ContentContainer>
@@ -62,5 +63,6 @@ export const DataPage = ({ asset }: { asset: GenieAsset }) => {
           <DataPageTable asset={asset} />
         </ContentContainer>
       </DataPageContainer>
+    </DataPagePaddingContainer>
   )
 }

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

@@ -2,13 +2,13 @@
 
 exports[`placeholder containers load 1`] = `
 <DocumentFragment>
-  .c2 {
+  .c3 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -18,7 +18,7 @@ exports[`placeholder containers load 1`] = `
   width: min-content;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -41,7 +41,7 @@ exports[`placeholder containers load 1`] = `
   border-radius: 4px;
 }
 
-.c3 {
+.c4 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -58,7 +58,7 @@ exports[`placeholder containers load 1`] = `
   justify-content: flex-start;
 }
 
-.c7 {
+.c8 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -76,7 +76,7 @@ exports[`placeholder containers load 1`] = `
   gap: 4px;
 }
 
-.c11 {
+.c12 {
   width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
@@ -96,7 +96,7 @@ exports[`placeholder containers load 1`] = `
   gap: 12px;
 }
 
-.c21 {
+.c22 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -114,15 +114,15 @@ exports[`placeholder containers load 1`] = `
   gap: 8px;
 }
 
-.c8 {
+.c9 {
   color: #7780A0;
 }
 
-.c9 {
+.c10 {
   color: #0D111C;
 }
 
-.c0 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -136,11 +136,11 @@ exports[`placeholder containers load 1`] = `
   justify-content: flex-start;
 }
 
-.c25 {
+.c26 {
   height: 568px;
 }
 
-.c18 {
+.c19 {
   background: #FFFFFF;
   border: 1px solid #D2D9EE;
   border-radius: 16px;
@@ -151,33 +151,33 @@ exports[`placeholder containers load 1`] = `
   align-self: flex-start;
 }
 
-.c19 {
+.c20 {
   gap: 32px;
   margin-bottom: 12px;
   width: 100;
 }
 
-.c20 {
+.c21 {
   color: #0D111C;
   line-height: 24px;
   cursor: pointer;
 }
 
-.c20:hover {
+.c21:hover {
   opacity: 0.6;
 }
 
-.c22 {
+.c23 {
   color: #98A1C0;
   line-height: 24px;
   cursor: pointer;
 }
 
-.c22:hover {
+.c23:hover {
   opacity: 0.6;
 }
 
-.c24 {
+.c25 {
   background: #D2D9EE;
   border-radius: 4px;
   padding: 2px 4px;
@@ -185,11 +185,11 @@ exports[`placeholder containers load 1`] = `
   line-height: 12px;
 }
 
-.c23 {
+.c24 {
   height: 252px;
 }
 
-.c13 {
+.c14 {
   padding: 16px;
   width: 100%;
   font-weight: 500;
@@ -227,56 +227,56 @@ exports[`placeholder containers load 1`] = `
   transform: perspective(1px) translateZ(0);
 }
 
-.c13:disabled {
+.c14:disabled {
   opacity: 50%;
   cursor: auto;
   pointer-events: none;
 }
 
-.c13 > * {
+.c14 > * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c13 > a {
+.c14 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c14 {
+.c15 {
   background-color: #F5F6FC;
   color: #7780A0;
   font-size: 16px;
   font-weight: 500;
 }
 
-.c14:hover {
+.c15:hover {
   background-color: #d2daf7;
 }
 
-.c14:active {
+.c15:active {
   background-color: #bdc8f3;
 }
 
-.c4 {
+.c5 {
   gap: 24px;
 }
 
-.c5 {
+.c6 {
   width: 96px;
   height: 96px;
   border-radius: 20px;
   object-fit: cover;
 }
 
-.c6 {
+.c7 {
   gap: 4px;
   margin-right: auto;
 }
 
-.c15 {
+.c16 {
   white-space: nowrap;
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -287,7 +287,13 @@ exports[`placeholder containers load 1`] = `
   border-radius: 16px;
 }
 
-.c1 {
+.c0 {
+  padding: 24px 64px;
+  height: 100vh;
+  width: 100%;
+}
+
+.c2 {
   height: 100%;
   width: 100%;
   gap: 36px;
@@ -295,12 +301,12 @@ exports[`placeholder containers load 1`] = `
   margin: 0 auto;
 }
 
-.c16 {
+.c17 {
   gap: 24px;
   padding-bottom: 45px;
 }
 
-.c17 {
+.c18 {
   gap: 24px;
   width: 100%;
   -webkit-align-self: flex-start;
@@ -309,19 +315,37 @@ exports[`placeholder containers load 1`] = `
 }
 
 @media screen and (max-width:768px) {
-  .c4 {
+  .c5 {
     display: none;
   }
 }
 
 @media screen and (max-width:1024px) {
-  .c5 {
+  .c6 {
     display: none;
   }
 }
 
+@media screen and (max-width:768px) {
+  .c0 {
+    height: 100%;
+  }
+}
+
+@media screen and (max-width:640px) {
+  .c0 {
+    padding: 24px 48px;
+  }
+}
+
+@media screen and (max-width:396px) {
+  .c0 {
+    padding: 24px 20px;
+  }
+}
+
 @media screen and (max-width:1024px) {
-  .c16 {
+  .c17 {
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
@@ -329,23 +353,26 @@ exports[`placeholder containers load 1`] = `
 }
 
 <div
-    class="c0 c1"
+    class="c0"
+  >
+    <div
+      class="c1 c2"
     >
       <div
-      class="c2 c3 c4"
+        class="c3 c4 c5"
       >
         <img
-        class="c5"
+          class="c6"
           src="https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/3318/50ed67ad647d0aa0cad0b830d136a677efc2fb72a44587bc35f2a5fb334a7fdf.png"
         />
         <div
-        class="c0 c6"
+          class="c1 c7"
         >
           <div
-          class="c2 c7"
+            class="c3 c8"
           >
             <div
-            class="c8 css-1aekuku"
+              class="c9 css-1aekuku"
             >
               Azuki
             </div>
@@ -367,106 +394,107 @@ exports[`placeholder containers load 1`] = `
             </svg>
           </div>
           <div
-          class="c9 css-1tiu9da"
+            class="c10 css-1tiu9da"
           >
             Azuki #3318
           </div>
         </div>
         <div
-        class="c10 c11"
+          class="c11 c12"
           width="min-content"
         >
           <button
-          class="c12 c13 c14 c15"
+            class="c13 c14 c15 c16"
           >
             Make an offer
           </button>
         </div>
       </div>
       <div
-      class="c2 c3 c16"
+        class="c3 c4 c17"
       >
         <div
-        class="c0 c17"
+          class="c1 c18"
         >
           <div
-          class="c18"
+            class="c19"
           >
             <div
-            class="c2 c3 c19"
+              class="c3 c4 c20"
             >
               <div
-              class="c9 c20 css-rjqmed"
+                class="c10 c21 css-rjqmed"
               >
                 <div
-                class="c2 c21"
+                  class="c3 c22"
                 >
                   Description
                 </div>
               </div>
               <div
-              class="c9 c22 css-rjqmed"
+                class="c10 c23 css-rjqmed"
               >
                 <div
-                class="c2 c21"
+                  class="c3 c22"
                 >
                   Details
                 </div>
               </div>
             </div>
             <div
-            class="c23"
+              class="c24"
             >
               Description Content
             </div>
           </div>
         </div>
         <div
-        class="c18"
+          class="c19"
         >
           <div
-          class="c2 c3 c19"
+            class="c3 c4 c20"
           >
             <div
-            class="c9 c20 css-rjqmed"
+              class="c10 c21 css-rjqmed"
             >
               <div
-              class="c2 c21"
+                class="c3 c22"
               >
                 Activity
               </div>
             </div>
             <div
-            class="c9 c22 css-rjqmed"
+              class="c10 c23 css-rjqmed"
             >
               <div
-              class="c2 c21"
+                class="c3 c22"
               >
                 Offers
                 <div
-                class="c24 css-f8aq60"
+                  class="c25 css-f8aq60"
                 >
                   10+
                 </div>
               </div>
             </div>
             <div
-            class="c9 c22 css-rjqmed"
+              class="c10 c23 css-rjqmed"
             >
               <div
-              class="c2 c21"
+                class="c3 c22"
               >
                 Listings
               </div>
             </div>
           </div>
           <div
-          class="c25"
+            class="c26"
           >
             Activity Content
           </div>
         </div>
       </div>
     </div>
+  </div>
 </DocumentFragment>
 `;