From b04797052f8b35f07af1f3d9dd27ab352e974591 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 24 Aug 2024 16:16:32 +0200
Subject: [PATCH] chore: expanded containers width in views, adjusted dropdowns

---
 src/components/JournalView/JournalStats.vue | 13 ++++++++++---
 src/components/TrainsView/TrainTable.vue    |  3 ---
 src/styles/JournalSection.scss              |  2 +-
 src/styles/JournalStats.scss                |  3 +--
 src/styles/global.scss                      |  2 +-
 src/views/TrainsView.vue                    |  2 +-
 6 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/JournalView/JournalStats.vue b/src/components/JournalView/JournalStats.vue
index d0b158b..a72b0d0 100644
--- a/src/components/JournalView/JournalStats.vue
+++ b/src/components/JournalView/JournalStats.vue
@@ -30,7 +30,11 @@
     </div>
 
     <transition name="dropdown-anim">
-      <div class="dropdown_wrapper" v-if="currentStatsTab !== null">
+      <div
+        class="dropdown_wrapper"
+        :class="{ 'dropdown-align-right': true }"
+        v-if="currentStatsTab !== null"
+      >
         <keep-alive>
           <component :is="currentStatsTab" :key="currentStatsTab"></component>
         </keep-alive>
@@ -79,7 +83,10 @@ export default defineComponent({
 @import '../../styles/dropdown_filters.scss';
 @import '../../styles/variables.scss';
 
-.dropdown_wrapper {
-  max-width: 100%;
+.dropdown_wrapper.dropdown-align-right {
+  left: auto;
+  right: 0;
+  max-width: 700px;
+  // max-width: 100%;
 }
 </style>
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index acb7c20..76126ce 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -83,9 +83,6 @@ export default defineComponent({
 
 .train-table {
   position: relative;
-
-  height: 90vh;
-  min-height: 550px;
   overflow-y: auto;
   overflow-x: hidden;
 }
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index 74a34cb..df3867c 100644
--- a/src/styles/JournalSection.scss
+++ b/src/styles/JournalSection.scss
@@ -20,7 +20,7 @@
 }
 
 .journal_wrapper {
-  max-width: 1500px;
+  max-width: var(--max-container-width);
   width: 100%;
 
   margin: 0 auto;
diff --git a/src/styles/JournalStats.scss b/src/styles/JournalStats.scss
index 708bb0a..af5416a 100644
--- a/src/styles/JournalStats.scss
+++ b/src/styles/JournalStats.scss
@@ -8,7 +8,6 @@
   z-index: 99;
 
   transform: translateY(1em);
-
   width: 100%;
 
   background-color: #1a1a1a;
@@ -30,7 +29,7 @@ hr.section-separator {
 .info-stats {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+
   gap: 0.5em;
 }
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 04224be..e94b6aa 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -21,7 +21,7 @@
   --clr-donator: #f7a4ff;
 
   --no-scroll-padding: 17px;
-  --max-container-width: 1700px;
+  --max-container-width: 2000px;
 
   font-size: 16px;
 }
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index fa543f1..cb7e646 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -123,7 +123,7 @@ export default defineComponent({
 
 .trains_wrapper {
   margin: 1rem auto;
-  max-width: 1500px;
+  max-width: var(--max-container-width);
 }
 
 .trains_topbar {