From a31912650fcfc6c17c3b0b70c43c04f1eb17ffe2 Mon Sep 17 00:00:00 2001
From: Emil Elgaard <shivan@shivand.dk>
Date: Tue, 21 Mar 2023 13:22:04 -0400
Subject: [PATCH] Make the footer be in the bottom of the page always, even if
 there is not enough content to push it down.

---
 src/App.svelte | 32 ++++++++++++++++++--------------
 src/app.scss   | 12 ++++++++++++
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 5bcf594..8cf72e1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -18,21 +18,25 @@
   }
 </script>
 
-<Navbar />
+<div class="page_container">
 
-<section class="section">
-  <div class="container is-fullhd">
-    <div class="columns">
-      <div class="column is-one-fifth">
-        <Sidebar bind:apiKey bind:sortedChats />
-      </div>
-      <div class="column is-four-fifths">
-        {#key $location}
-          <Router {routes} />
-        {/key}
+  <Navbar />
+
+  <section class="section">
+    <div class="container is-fullhd">
+      <div class="columns">
+        <div class="column is-one-fifth">
+          <Sidebar bind:apiKey bind:sortedChats />
+        </div>
+        <div class="column is-four-fifths">
+          {#key $location}
+            <Router {routes} />
+          {/key}
+        </div>
       </div>
     </div>
-  </div>
-</section>
+  </section>
 
-<Footer />
+  <Footer />
+
+</div>
diff --git a/src/app.scss b/src/app.scss
index fbc1aa5..d66994c 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -7,6 +7,18 @@
   }
 }
 
+.page_container {
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 100vh;
+
+  section.section{
+    flex-grow: 1;
+  }
+}
+
 .rotate {
   animation: rotating 10s linear infinite;
 }