From fbe8307b3018c0013e2d7e00e080f7f28f40f715 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Mon, 1 Jul 2024 19:26:44 +0200
Subject: [PATCH 1/2] fix(web): add wrapper for home page

---
 web/src/pages/Home/index.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
index 70e69d75d..79fbca13b 100644
--- a/web/src/pages/Home/index.tsx
+++ b/web/src/pages/Home/index.tsx
@@ -13,6 +13,10 @@ import Community from "./Community";
 import CourtOverview from "./CourtOverview";
 import TopJurors from "./TopJurors";
 
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
@@ -24,13 +28,15 @@ const Container = styled.div`
 const Home: React.FC = () => {
   return (
     <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
-      <HeroImage />
-      <Container>
-        <CourtOverview />
-        <LatestCases />
-        <TopJurors />
-        <Community />
-      </Container>
+      <Wrapper>
+        <HeroImage />
+        <Container>
+          <CourtOverview />
+          <LatestCases />
+          <TopJurors />
+          <Community />
+        </Container>
+      </Wrapper>
     </HomePageProvider>
   );
 };

From 492ded8a856fe5fe145b52e8ffa603f66259b1eb Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Mon, 1 Jul 2024 19:35:29 +0200
Subject: [PATCH 2/2] fix(web): add wrapper to getPnk and dispute resolver

---
 web/src/pages/GetPnk/index.tsx   | 8 ++++++--
 web/src/pages/Resolver/index.tsx | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx
index e2d82ecd2..96527d282 100644
--- a/web/src/pages/GetPnk/index.tsx
+++ b/web/src/pages/GetPnk/index.tsx
@@ -10,6 +10,10 @@ import HeroImage from "components/HeroImage";
 
 import { Widget } from "./Widget";
 
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
@@ -25,13 +29,13 @@ const Container = styled.div`
 
 const GetPnk: React.FC = () => {
   return (
-    <>
+    <Wrapper>
       <HeroImage />
       <Container>
         {!isProductionDeployment() && <ClaimPnkButton />}
         <Widget />
       </Container>
-    </>
+    </Wrapper>
   );
 };
 
diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx
index 7a25d2495..deec0d39e 100644
--- a/web/src/pages/Resolver/index.tsx
+++ b/web/src/pages/Resolver/index.tsx
@@ -22,6 +22,10 @@ import Policy from "./Policy";
 import Preview from "./Preview";
 import Timeline from "./Timeline";
 
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -71,7 +75,7 @@ const DisputeResolver: React.FC = () => {
   const { isConnected } = useAccount();
   const isPreviewPage = location.pathname.includes("/preview");
   return (
-    <>
+    <Wrapper>
       <HeroImage />
       <Container>
         {isConnected && !isPreviewPage ? <StyledLabel>Start a case</StyledLabel> : null}
@@ -101,7 +105,7 @@ const DisputeResolver: React.FC = () => {
           </ConnectWalletContainer>
         )}
       </Container>
-    </>
+    </Wrapper>
   );
 };