1 files changed, 30 insertions, 9 deletions
diff --git a/static/style.css b/static/style.css
index 15f2665..01281d8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -6,20 +6,24 @@ body {
   padding: 0;
   font-family: "DM Sans", sans-serif;
   font-size: 12pt;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  justify-items: center;
+  min-height: 100vh;
+  width: 100%;
 }
 
 header {
   background: #3b005e;
   color: white;
+  position: sticky;
+  top: 0;
   padding: 8px;
   margin-bottom: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 100vw;
+  width: 100%;
   box-sizing: border-box;
 }
 
@@ -28,7 +32,7 @@ header {
 }
 
 nav {
-  width: min(800px, 100vw);
+  width: min(800px, 100%);
   height: 32px;
   box-sizing: border-box;
   display: grid;
@@ -72,7 +76,20 @@ nav {
 }
 
 main {
-  width: min(800px, 100vw);
+  width: min(1300px, 100%);
+  display: grid;
+  grid-template-columns: 1fr min(700px, 100%) 1fr;
+  height: 100%;
+  #leftPane,
+  #rightPane {
+    position: sticky;
+    top: 56px;
+    height: max-content;
+  }
+  @media (width < 1300px) {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+  }
 }
 
 h1 {
@@ -233,12 +250,13 @@ form {
   gap: 16px;
   max-width: max-content;
 
-  label:has(+ input) {
+  label:has(+ input, + textarea) {
     display: block;
     font-size: 10pt;
     color: #555;
   }
-  input:not([type="checkbox"]) {
+  input:not([type="checkbox"]),
+  textarea {
     display: block;
     border: 1px solid #3334;
     border-radius: 8px;
@@ -248,7 +266,10 @@ form {
     font-size: inherit;
     color: inherit;
     background: #fff;
-    width: 24em;
+    width: min(60vw, 24em, calc(100% - 16px));
+  }
+  textarea {
+    resize: vertical;
   }
   button {
     background: #3b005e;