diff --git a/src/App.vue b/src/App.vue index 968a979..e4670ed 100644 --- a/src/App.vue +++ b/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); - } -} diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 68cdc88..5c6137f 100644 --- a/src/styles/_global.scss +++ b/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; diff --git a/src/styles/_order.scss b/src/styles/_order.scss index 26267a8..44f08e8 100644 --- a/src/styles/_order.scss +++ b/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; diff --git a/src/views/Home.vue b/src/views/Home.vue index 6a62d22..ab64c61 100644 --- a/src/views/Home.vue +++ b/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;