Poprawki responsywności

src/components/OrderTrainPicker.vue

@@ -93,7 +93,7 @@ export default defineComponent({
       selectedDispatcherName: null as string | null,
       selectedCheckpointName: null as string | null,
 
-      fillCheckpointName: true,
+      fillCheckpointName: false,
 
       refreshInterval: -1,
       store: useStore(),
@@ -119,6 +119,9 @@ export default defineComponent({
   watch: {
     selectedDispatcherName() {
       this.selectedSceneryName = this.sceneryNameList.length == 0 ? null : this.sceneryNameList[0];
+    },
+
+    selectedSceneryName() {
       this.selectedCheckpointName = this.checkpointNameList.length == 0 ? null : this.checkpointNameList[0];
     },
   },

src/components/SideBar.vue

@@ -63,16 +63,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../styles/global.scss';
 
-.sidebar {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  z-index: 999;
-
-  transform: translate(-100%, 0);
-}
-
 .sidebar_content {
   display: grid;
   grid-template-rows: repeat(3, 1fr);
@@ -137,14 +127,6 @@ button.option-save {
 }
 
 @media screen and (max-width: 650px) {
-  .sidebar {
-    left: 50%;
-    top: 0;
-    width: 100%;
-
-    transform: translate(-50%, -100%);
-  }
-
   .sidebar_content {
     display: flex;
     justify-content: space-between;

src/views/Home.vue

@@ -43,7 +43,6 @@ import { useStore } from '../store/store';
 import OrderHelper from '../components/OrderHelper.vue';
 import OrderTrainPicker from '../components/OrderTrainPicker.vue';
 
-
 export default defineComponent({
   components: { OrderVue, SideBar, OrderHelper },
 
@@ -116,16 +115,20 @@ export default defineComponent({
     width: 100%;
 
     @media screen and (max-width: 650px) {
-      padding-top: 5em;
-      padding-bottom: 5em;
+      padding: 1em 0.5em;
     }
   }
 
   .order_container {
     width: 100%;
-    max-width: 550px;
+    max-width: 600px;
 
-    position: relative;
+    display: flex;
+    align-items: start;
+
+    @media screen and (max-width: 650px) {
+      flex-direction: column;
+    }
   }
 
   .message_container {