Fixes footer overlapping with content

frontend/src/components/Footer.tsx

@@ -2,107 +2,89 @@ 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">
-					<div className="row text-center align-items-center flex-row-reverse">
-						<div className="col-lg-auto ms-lg-auto">
-							<ul className="list-inline list-inline-dots mb-0">
-								<li className="list-inline-item">
-									<a
-										href="https://nginxproxymanager.com?utm_source=npm"
-										target="_blank"
-										rel="noreferrer"
-										className="link-secondary">
-										{intl.formatMessage({
-											id: "footer.userguide",
-											defaultMessage: "User Guide",
-										})}
-									</a>
-								</li>
-								<li className="list-inline-item">
-									<a
-										href="https://github.com/jc21/nginx-proxy-manager/releases?utm_source=npm"
-										target="_blank"
-										rel="noreferrer"
-										className="link-secondary">
-										{intl.formatMessage({
-											id: "footer.changelog",
-											defaultMessage: "Change Log",
-										})}
-									</a>
-								</li>
-								<li className="list-inline-item">
-									<a
-										href="https://github.com/jc21/nginx-proxy-manager?utm_source=npm"
-										target="_blank"
-										rel="noreferrer"
-										className="link-secondary">
-										{intl.formatMessage({
-											id: "footer.github",
-											defaultMessage: "Github",
-										})}
-									</a>
-								</li>
-							</ul>
-						</div>
-						<div className="col-12 col-lg-auto mt-3 mt-lg-0">
-							<ul className="list-inline list-inline-dots mb-0">
-								<li className="list-inline-item">
-									{intl.formatMessage(
-										{
-											id: "footer.copyright",
-											defaultMessage: "Copyright © {year} jc21.com",
-										},
-										{ year: new Date().getFullYear() },
-									)}{" "}
-									<a
-										className="link-secondary"
-										href="https://preview.tabler.io/"
-										target="_blank"
-										rel="noreferrer">
-										{intl.formatMessage({
-											id: "footer.theme",
-											defaultMessage: "Theme by Tabler",
-										})}
-									</a>
-								</li>
-								<li className="list-inline-item">
-									<a
-										href="https://github.com/jc21/nginx-proxy-manager/releases?utm_source=npm"
-										target="_blank"
-										className="link-secondary"
-										rel="noopener noreferrer">
-										v{health.version} {String.fromCharCode(183)} {health.commit}
-									</a>
-								</li>
-							</ul>
-						</div>
+	return (
+		<footer className="footer footer-transparent d-print-none">
+			<div className="container">
+				<div className="row text-center align-items-center flex-row-reverse">
+					<div className="col-lg-auto ms-lg-auto">
+						<ul className="list-inline list-inline-dots mb-0">
+							<li className="list-inline-item">
+								<a
+									href="https://nginxproxymanager.com?utm_source=npm"
+									target="_blank"
+									rel="noreferrer"
+									className="link-secondary">
+									{intl.formatMessage({
+										id: "footer.userguide",
+										defaultMessage: "User Guide",
+									})}
+								</a>
+							</li>
+							<li className="list-inline-item">
+								<a
+									href="https://github.com/jc21/nginx-proxy-manager/releases?utm_source=npm"
+									target="_blank"
+									rel="noreferrer"
+									className="link-secondary">
+									{intl.formatMessage({
+										id: "footer.changelog",
+										defaultMessage: "Change Log",
+									})}
+								</a>
+							</li>
+							<li className="list-inline-item">
+								<a
+									href="https://github.com/jc21/nginx-proxy-manager?utm_source=npm"
+									target="_blank"
+									rel="noreferrer"
+									className="link-secondary">
+									{intl.formatMessage({
+										id: "footer.github",
+										defaultMessage: "Github",
+									})}
+								</a>
+							</li>
+						</ul>
+					</div>
+					<div className="col-12 col-lg-auto mt-3 mt-lg-0">
+						<ul className="list-inline list-inline-dots mb-0">
+							<li className="list-inline-item">
+								{intl.formatMessage(
+									{
+										id: "footer.copyright",
+										defaultMessage: "Copyright © {year} jc21.com",
+									},
+									{ year: new Date().getFullYear() },
+								)}{" "}
+								<a
+									className="link-secondary"
+									href="https://preview.tabler.io/"
+									target="_blank"
+									rel="noreferrer">
+									{intl.formatMessage({
+										id: "footer.theme",
+										defaultMessage: "Theme by Tabler",
+									})}
+								</a>
+							</li>
+							<li className="list-inline-item">
+								<a
+									href="https://github.com/jc21/nginx-proxy-manager/releases?utm_source=npm"
+									target="_blank"
+									className="link-secondary"
+									rel="noopener noreferrer">
+									v{health.version} {String.fromCharCode(183)} {health.commit}
+								</a>
+							</li>
+						</ul>
 					</div>
 				</div>
-			</footer>
-		);
-	};
-
-	return fixed ? (
-		<FixedFooterWrapper>{wrapped()}</FixedFooterWrapper>
-	) : (
-		wrapped()
+			</div>
+		</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,55 +35,59 @@ function SiteWrapper({ children }: Props) {
 	const { logout } = useAuthState();
 
 	return (
-		<div className="wrapper">
-			<Navigation.Header
-				theme="light"
-				brandContent={
-					<img
-						src="/images/logo-bold-horizontal-grey.svg"
-						alt="Nginx Proxy Manager"
-						className="navbar-brand-image"
-						height="32"
-					/>
-				}
-				avatar={<Avatar size="sm" url={user.gravatarUrl} />}
-				profileName={user.nickname}
-				profileSubName={
-					user.roles.includes("admin")
-						? intl.formatMessage({
-								id: "users.admin",
-								defaultMessage: "Administrator",
-						  })
-						: intl.formatMessage({
-								id: "users.standard",
-								defaultMessage: "Standard User",
-						  })
-				}
-				buttons={[<LocalePicker key="lp1" />]}
-				profileItems={[
-					<Dropdown.Item key="m1-2">
-						{intl.formatMessage({
-							id: "profile.title",
-							defaultMessage: "Profile settings",
-						})}
-					</Dropdown.Item>,
-					<Dropdown.Item divider key="m1-4" />,
-					<Dropdown.Item key="m1-6" onClick={logout}>
-						{intl.formatMessage({
-							id: "profile.logout",
-							defaultMessage: "Logout",
-						})}
-					</Dropdown.Item>,
-				]}
-			/>
-			<NavMenu />
-			<div className="content">
-				<div className="container-xl">
-					<StyledContainer>{children}</StyledContainer>
+		<StyledSiteContainer className="wrapper">
+			<StyledScrollContainer>
+				<Navigation.Header
+					theme="light"
+					brandContent={
+						<img
+							src="/images/logo-bold-horizontal-grey.svg"
+							alt="Nginx Proxy Manager"
+							className="navbar-brand-image"
+							height="32"
+						/>
+					}
+					avatar={<Avatar size="sm" url={user.gravatarUrl} />}
+					profileName={user.nickname}
+					profileSubName={
+						user.roles.includes("admin")
+							? intl.formatMessage({
+									id: "users.admin",
+									defaultMessage: "Administrator",
+							  })
+							: intl.formatMessage({
+									id: "users.standard",
+									defaultMessage: "Standard User",
+							  })
+					}
+					buttons={[<LocalePicker key="lp1" />]}
+					profileItems={[
+						<Dropdown.Item key="m1-2">
+							{intl.formatMessage({
+								id: "profile.title",
+								defaultMessage: "Profile settings",
+							})}
+						</Dropdown.Item>,
+						<Dropdown.Item divider key="m1-4" />,
+						<Dropdown.Item key="m1-6" onClick={logout}>
+							{intl.formatMessage({
+								id: "profile.logout",
+								defaultMessage: "Logout",
+							})}
+						</Dropdown.Item>,
+					]}
+				/>
+				<NavMenu />
+				<div className="content">
+					<div className="container-xl">
+						<StyledContentContainer>{children}</StyledContentContainer>
+					</div>
 				</div>
-			</div>
-			<Footer fixed />
-		</div>
+			</StyledScrollContainer>
+			<StyledFooterContainer>
+				<Footer />
+			</StyledFooterContainer>
+		</StyledSiteContainer>
 	);
 }