Fix height of the chat container so it doesn't overflow the viewport

Author: chriscarrollsmith

static/styles.css

@@ -15,12 +15,16 @@
 html,
 body {
   max-width: 100vw;
+  min-height: 100vh;
   overflow-x: hidden;
+  height: 100%;
 }
 
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: rgb(var(--foreground-rgb));
+  display: flex;
+  flex-direction: column;
 }
 
 a {
@@ -72,12 +76,11 @@ pre {
 }
 
 .main {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
   background-color: white;
+  align-items: center;
 }
 
 .title {
@@ -87,15 +90,13 @@ pre {
 }
 
 .container {
+  flex: 1;
   display: flex;
-  flex-direction: row;
   gap: 20px;
   max-width: 1200px;
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
-  align-items: flex-start;
-  justify-content: center;
 }
 
 .category {
@@ -123,7 +124,6 @@ pre {
 .container {
   display: flex;
   width: 100%;
-  height: 100vh;
   max-width: 700px;
 }