chore: expanded containers width in views, adjusted dropdowns

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>

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;
 }

src/styles/JournalSection.scss

@@ -20,7 +20,7 @@
 }
 
 .journal_wrapper {
-  max-width: 1500px;
+  max-width: var(--max-container-width);
   width: 100%;
 
   margin: 0 auto;

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;
 }
 

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;
 }

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 {