Design

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>

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 {

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;

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 {

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>