Merge pull request #1639 from kleros/fix(web)/hero-svg

fix(web): add wrapper for home page

Author: alcercu

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>
   );
 };
 

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>
   );
 };

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>
   );
 };