Fixes footer overlapping with content

frontend/src/components/Footer.tsx

@@ -2,21 +2,10 @@ import React from "react";
 
 import { useHealthState } from "context";
 import { intl } from "locale";
-import styled from "styled-components";
 
-const FixedFooterWrapper = styled.div`
-	position: fixed;
-	bottom: 0;
-	width: 100%;
-`;
-
-interface Props {
-	fixed?: boolean;
-}
-function Footer({ fixed }: Props) {
+function Footer() {
 	const { health } = useHealthState();
 
-	const wrapped = () => {
 	return (
 		<footer className="footer footer-transparent d-print-none">
 			<div className="container">
@@ -97,13 +86,6 @@ function Footer({ fixed }: Props) {
 			</div>
 		</footer>
 	);
-	};
-
-	return fixed ? (
-		<FixedFooterWrapper>{wrapped()}</FixedFooterWrapper>
-	) : (
-		wrapped()
-	);
 }
 
 export { Footer };

frontend/src/components/SiteWrapper.tsx

@@ -9,10 +9,24 @@ import styled from "styled-components";
 
 import { NavMenu } from "./NavMenu";
 
-const StyledContainer = styled.div`
+const StyledSiteContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+`;
+
+const StyledScrollContainer = styled.div`
+	flex: 1 0 auto;
+	overflow: auto;
+`;
+
+const StyledContentContainer = styled.div`
 	padding-bottom: 30px;
 `;
 
+const StyledFooterContainer = styled.div`
+	flex-shrink: 0;
+`;
 interface Props {
 	children?: ReactNode;
 }
@@ -21,7 +35,8 @@ function SiteWrapper({ children }: Props) {
 	const { logout } = useAuthState();
 
 	return (
-		<div className="wrapper">
+		<StyledSiteContainer className="wrapper">
+			<StyledScrollContainer>
 				<Navigation.Header
 					theme="light"
 					brandContent={
@@ -65,11 +80,14 @@ function SiteWrapper({ children }: Props) {
 				<NavMenu />
 				<div className="content">
 					<div className="container-xl">
-					<StyledContainer>{children}</StyledContainer>
+						<StyledContentContainer>{children}</StyledContentContainer>
 					</div>
 				</div>
-			<Footer fixed />
-		</div>
+			</StyledScrollContainer>
+			<StyledFooterContainer>
+				<Footer />
+			</StyledFooterContainer>
+		</StyledSiteContainer>
 	);
 }