fix(web): add wrapper to getPnk and dispute resolver

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