chore: improved responsiveness

src/App.vue

@@ -111,10 +111,4 @@ footer {
   text-align: center;
   padding: 0.5em 0;
 }
-
-@media screen and (max-width: 500px) {
-  #app {
-    font-size: calc(1vw + 0.65rem);
-  }
-}
 </style>

src/styles/_global.scss

@@ -2,23 +2,6 @@
 @use 'colors';
 @use 'sass:color';
 
-// Global scrollbar style
-::-webkit-scrollbar {
-  width: 15px;
-}
-
-::-webkit-scrollbar-track {
-  background: #333;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
 body,
 html {
   padding: 0;

src/styles/_order.scss

@@ -15,13 +15,15 @@ $darkModeTextCol: #eee;
   }
 
   @media screen and (max-width: 550px) {
-    font-size: 3vw;
+    font-size: 0.85em;
   }
 }
 
 table.order-table {
   width: 100%;
   overflow: auto;
+  table-layout: fixed;
+  min-width: 750px;
 
   border: 2px solid black;
   border-collapse: collapse;

src/views/Home.vue

@@ -42,7 +42,7 @@ import { TPanelMode } from '../types/dataTypes';
 const { t } = useI18n();
 const store = useStore();
 
-const navActions: TPanelMode[] = ['OrderListPanel', 'OrderMessagePanel', 'OrderTrainPickerPanel'];
+const navActions: TPanelMode[] = ['OrderMessagePanel', 'OrderListPanel', 'OrderTrainPickerPanel'];
 
 function selectOrderMode(mode: TPanelMode) {
   store.panelMode = mode;
@@ -75,29 +75,28 @@ const panelComponent = computed(() => {
 }
 
 .home-container {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 800px 500px;
   justify-content: center;
   gap: 2em 1em;
   padding: 1em;
-
   width: 100%;
 
   & > div {
-    max-height: calc(100vh - 5em);
+    height: calc(100vh - 5em);
     overflow: auto;
   }
 
-  @media screen and (max-width: 650px) {
+  @media screen and (max-width: 1350px) {
+    grid-template-columns: auto;
     padding: 1em 0.5em;
   }
 }
 
 .order-container {
-  max-width: 800px;
-
   display: flex;
   align-items: start;
+  max-width: 800px;
 
   @media screen and (max-width: 650px) {
     flex-direction: column;
@@ -105,8 +104,8 @@ const panelComponent = computed(() => {
 }
 
 .panel-container {
-  width: 500px;
   padding: 2px;
+  max-width: 800px;
 
   display: grid;
   grid-template-rows: auto auto 1fr;