From 0a2a05652594202698467e89c798e2f6e4b5180b Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Tue, 2 Jul 2024 15:41:12 +0200
Subject: [PATCH 1/2] chore

---
 src/Apps/Sell/Components/SubmissionLayout.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/Apps/Sell/Components/SubmissionLayout.tsx b/src/Apps/Sell/Components/SubmissionLayout.tsx
index c679ab6fe8f..b52eb96bbd2 100644
--- a/src/Apps/Sell/Components/SubmissionLayout.tsx
+++ b/src/Apps/Sell/Components/SubmissionLayout.tsx
@@ -5,6 +5,7 @@ import { SubmissionHeader } from "Apps/Sell/Components/SubmissionHeader"
 import { SubmissionProgressBar } from "Apps/Sell/Components/SubmissionProgressBar"
 import { useSellFlowContext } from "Apps/Sell/SellFlowContext"
 import { FadeInBox } from "Components/FadeInBox"
+import { useWindowSize } from "Utils/Hooks/useWindowSize"
 import { useEffect } from "react"
 
 const CONTENT_WIDTH = 640
@@ -25,6 +26,11 @@ export const SubmissionLayout: React.FC<SubmissionLayoutProps> = ({
     context.actions?.setLoading(loading)
   }, [context.actions, loading])
 
+  const { width } = useWindowSize()
+
+  // 40 is the padding on either side of the content
+  const size = width < 768 ? "100vw" : width - 40
+
   return (
     <Flex height="100dvh" flexDirection="column">
       <SubmissionHeader />
@@ -45,9 +51,11 @@ export const SubmissionLayout: React.FC<SubmissionLayoutProps> = ({
             </Column>
           </GridColumns>
         ) : (
-          <FadeInBox maxWidth="100vw" width={CONTENT_WIDTH} p={2} pt={[2, 4]}>
-            {children}
-          </FadeInBox>
+          <Flex width={size} justifyContent="center">
+            <FadeInBox maxWidth="100vw" width={CONTENT_WIDTH} p={2} pt={[2, 4]}>
+              {children}
+            </FadeInBox>
+          </Flex>
         )}
       </Flex>
 

From f19587f1fac14a91f012884dee08adc0ba2c35c9 Mon Sep 17 00:00:00 2001
From: dariakoko <nargle30@gmail.com>
Date: Tue, 2 Jul 2024 16:29:11 +0200
Subject: [PATCH 2/2] chore: address review comment

---
 src/Apps/Sell/Components/SubmissionLayout.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/Apps/Sell/Components/SubmissionLayout.tsx b/src/Apps/Sell/Components/SubmissionLayout.tsx
index b52eb96bbd2..45bbd8a00b1 100644
--- a/src/Apps/Sell/Components/SubmissionLayout.tsx
+++ b/src/Apps/Sell/Components/SubmissionLayout.tsx
@@ -5,7 +5,6 @@ import { SubmissionHeader } from "Apps/Sell/Components/SubmissionHeader"
 import { SubmissionProgressBar } from "Apps/Sell/Components/SubmissionProgressBar"
 import { useSellFlowContext } from "Apps/Sell/SellFlowContext"
 import { FadeInBox } from "Components/FadeInBox"
-import { useWindowSize } from "Utils/Hooks/useWindowSize"
 import { useEffect } from "react"
 
 const CONTENT_WIDTH = 640
@@ -26,11 +25,6 @@ export const SubmissionLayout: React.FC<SubmissionLayoutProps> = ({
     context.actions?.setLoading(loading)
   }, [context.actions, loading])
 
-  const { width } = useWindowSize()
-
-  // 40 is the padding on either side of the content
-  const size = width < 768 ? "100vw" : width - 40
-
   return (
     <Flex height="100dvh" flexDirection="column">
       <SubmissionHeader />
@@ -51,7 +45,7 @@ export const SubmissionLayout: React.FC<SubmissionLayoutProps> = ({
             </Column>
           </GridColumns>
         ) : (
-          <Flex width={size} justifyContent="center">
+          <Flex width="100vw" justifyContent="center">
             <FadeInBox maxWidth="100vw" width={CONTENT_WIDTH} p={2} pt={[2, 4]}>
               {children}
             </FadeInBox>