fix: stick footer to bottom of the page (#469)

* fix: stick footer to bottom of the page

* fix: 100% width

Author: lorenzopalaia

src/layout/PageLayout/Footer.tsx

@@ -8,7 +8,7 @@ import { JSONCrackLogo } from "../JsonCrackLogo";
 
 export const Footer = () => {
   return (
-    <Container mt={60} px={60} pb="xl" bg="black" fluid>
+    <Container w="100%" mt={60} px={60} pb="xl" bg="black" fluid>
       <Divider color="gray.3" mb="xl" mx={-60} />
       <Flex justify="space-between">
         <Stack gap={4} visibleFrom="sm">

src/layout/PageLayout/index.tsx

@@ -12,14 +12,21 @@ const inter = Inter({
 const StyledLayoutWrapper = styled.div`
   background: #fff;
   font-family: ${inter.style.fontFamily};
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+
+const ContentWrapper = styled.div`
+  flex: 1;
 `;
 
 const PageLayout = ({ children }: React.PropsWithChildren) => {
   return (
     <ThemeProvider theme={lightTheme}>
       <StyledLayoutWrapper>
         <Navbar />
-        {children}
+        <ContentWrapper>{children}</ContentWrapper>
         <Footer />
       </StyledLayoutWrapper>
     </ThemeProvider>