Merge pull request #1236 from kleros/fix(web)/padding-bottom-homepage

fix(web): layout unexpected paddings

Author: alcercu

web/src/layout/index.tsx

@@ -9,6 +9,8 @@ import Header from "./Header";
 import Footer from "./Footer";
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
   min-height: 100%;
   width: 100%;
 `;
@@ -23,6 +25,11 @@ const StyledToastContainer = styled(ToastContainer)`
   padding-top: 70px;
 `;
 
+const OutletContainer = styled.div`
+  flex: 1;
+  background-color: ${({ theme }) => theme.lightBackground};
+`;
+
 const Layout: React.FC = () => {
   const containerRef = useRef(null);
 
@@ -32,7 +39,10 @@ const Layout: React.FC = () => {
         <Container>
           <Header />
           <StyledToastContainer />
-          <Outlet />
+          <OutletContainer>
+            <Outlet />
+          </OutletContainer>
+
           <Footer />
         </Container>
       </StyledOverlayScrollbarsComponent>

web/src/pages/Cases/index.tsx

@@ -7,9 +7,9 @@ import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import CasesDisplay from "components/CasesDisplay";
 import CaseDetails from "./CaseDetails";
 import { useFiltersContext } from "context/FilterProvider";
+
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);

web/src/pages/Courts/index.tsx

@@ -6,7 +6,6 @@ import CourtDetails from "./CourtDetails";
 
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);

web/src/pages/Dashboard/index.tsx

@@ -12,7 +12,6 @@ import ConnectWallet from "components/ConnectWallet";
 
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
   padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);

web/src/pages/Home/index.tsx

@@ -9,7 +9,6 @@ import { getOneYearAgoTimestamp } from "utils/date";
 
 const Container = styled.div`
   width: 100%;
-  min-height: calc(100vh - 144px);
   background-color: ${({ theme }) => theme.lightBackground};
   padding: calc(32px + (132 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (72 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);