From 3155487a29bb484256ee7cd8e99534bb321a062e Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 16 Nov 2022 12:54:14 +0100
Subject: [PATCH] Design

---
 src/App.vue                         |  2 +-
 src/components/OrderList.vue        | 13 +++++++++----
 src/components/OrderMessage.vue     |  2 --
 src/components/OrderTrainPicker.vue |  3 ---
 src/views/Home.vue                  | 10 ++++++++++
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fcf7813..cc0fcb0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -82,7 +82,7 @@ footer {
 
 @media screen and (max-width: 500px) {
   #app {
-    font-size: calc(1vw + 0.5rem);
+    font-size: calc(1vw + 0.65rem);
   }
 }
 </style>
diff --git a/src/components/OrderList.vue b/src/components/OrderList.vue
index 2330077..12f2c6a 100644
--- a/src/components/OrderList.vue
+++ b/src/components/OrderList.vue
@@ -104,22 +104,27 @@ export default defineComponent({
 }
 
 .order-list {
-  padding: 1em;
+  overflow: auto;
 }
 
 ul {
-  max-height: 750px;
-  height: 80vh;
-
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
 }
 
 h3 {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
   margin: 0;
   margin-bottom: 1em;
   text-align: center;
+
+  background-color: #222;
+  padding: 1em;
+  margin-bottom: 0.5em;
 }
 
 li {
diff --git a/src/components/OrderMessage.vue b/src/components/OrderMessage.vue
index 990a507..c5cc2af 100644
--- a/src/components/OrderMessage.vue
+++ b/src/components/OrderMessage.vue
@@ -153,8 +153,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .order-message {
-  padding: 1em;
-
   h3 {
     margin: 0;
     margin-bottom: 1em;
diff --git a/src/components/OrderTrainPicker.vue b/src/components/OrderTrainPicker.vue
index 1c74232..fd9f30e 100644
--- a/src/components/OrderTrainPicker.vue
+++ b/src/components/OrderTrainPicker.vue
@@ -233,7 +233,6 @@ export default defineComponent({
 @import '../styles/global.scss';
 
 .order-train-picker {
-  padding: 1em;
   height: 90vh;
 
   overflow-y: auto;
@@ -241,8 +240,6 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   align-items: center;
-
-  margin-top: 1em;
 }
 
 .options {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4c2d80d..07946ba 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -130,12 +130,22 @@ export default defineComponent({
 
   .message_container {
     width: 500px;
+
+    display: grid;
+    grid-template-rows: auto 1fr;
+    overflow: hidden;
+
+    height: 95vh;
   }
 
   .message_nav {
     display: flex;
     align-items: center;
     justify-content: center;
+
+    flex-wrap: wrap;
+
+    margin-bottom: 2em;
   }
 }
 </style>