Keep statistics charts clear of the footer

Use a full-height flex layout and normal footer flow so long chart content scrolls without overlapping the footer. Keep the page gradient fixed while scrolling.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/App.module.css

@@ -1,4 +1,5 @@
 .app {
+  flex: 1 0 auto;
   max-width: 1220px;
   margin: 1rem auto;
 }

frontend/src/components/Footer.module.css

@@ -1,8 +1,6 @@
 .footer {
-  position: absolute;
+  flex-shrink: 0;
-  right: 0;
+  padding: 0 0 1rem;
-  bottom: 1rem;
-  left: 0;
   height: 20px;
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.8rem;

frontend/src/global.css

@@ -14,13 +14,18 @@
 html,
 body {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   padding: 0;
   margin: 0;
 }
 html {
   box-sizing: border-box;
 }
+#root {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
 *,
 *:before,
 *:after {
@@ -30,6 +35,7 @@ html {
 /* Body and interitable styles */
 body {
   background: linear-gradient(rgba(0, 0, 0, 0.8) 60%, var(--background) 100%);
+  background-attachment: fixed;
   background-color: var(--background);
   color: var(--text);
   font-family: var(--font-family);