Poprawki responsywności

src/components/App/AppHeader.vue

@@ -128,6 +128,10 @@ export default defineComponent({
 .header {
   &_body {
     max-width: 21em;
+
+    @include smallScreen {
+      max-width: 18em;
+    }
   }
 
   &_container {
@@ -141,8 +145,11 @@ export default defineComponent({
   }
 
   &_brand {
+    display: flex;
+
     img {
       width: 100%;
+      margin: 0 auto;
     }
   }
 

src/components/JournalView/JournalDispatchersList.vue

@@ -111,6 +111,8 @@ li.sticky {
 
   flex-wrap: wrap;
 
+  padding: 0.75em;
+
   &.online {
     cursor: pointer;
   }

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -102,7 +102,7 @@ export default defineComponent({
 
 @include smallScreen {
   .history-list {
-    font-size: 1.2em;
+    font-size: 1.1em;
   }
   .list-item {
     align-items: center;

src/components/SceneryView/SceneryHeader.vue

@@ -31,14 +31,9 @@ export default defineComponent({
 
   position: relative;
 
-  font-size: 3.5em;
-  padding: 0 0.5em;
+  font-size: 3em;
 
   text-transform: uppercase;
-
-  @include smallScreen() {
-    font-size: 2.75em;
-  }
 }
 
 .scenery-hash {

src/components/SceneryView/SceneryInfo.vue

@@ -109,7 +109,7 @@ h3.section-header {
   justify-content: center;
   align-items: center;
 
-  font-size: 1.5em;
+  font-size: 1.2em;
 
   img {
     width: 1.1em;
@@ -127,7 +127,6 @@ h3.section-header {
 
 .info-general {
   margin-top: 1em;
-  font-size: 1.1em;
 }
 
 .general-list {

src/components/SceneryView/SceneryTimetable.vue

@@ -505,8 +505,6 @@ export default defineComponent({
       display: flex;
       flex-direction: column;
       align-items: center;
-
-      font-size: 1.05em;
     }
 
     &-general {

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script lang="ts">
-
 import axios from 'axios';
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
@@ -106,13 +105,8 @@ export default defineComponent({
 }
 
 @include smallScreen {
-  .history-list {
-    font-size: 1.1em;
-  }
   .list-item {
     grid-template-columns: 1fr 1fr;
-    font-size: 1.05em;
   }
 }
 </style>
-

src/components/TrainsView/TrainInfo.vue

@@ -248,6 +248,7 @@ export default defineComponent({
     gap: 1em 0;
     text-align: center;
 
+    font-size: 1.15em;
   }
 
   .train-stats {

src/styles/filters_options.scss

@@ -126,6 +126,9 @@ h1.option-title {
 }
 
 @include smallScreen() {
+  .filters-options {
+  }
+  
   h1 {
     text-align: center;
 
@@ -137,6 +140,7 @@ h1.option-title {
   }
 
   .options_wrapper {
+    font-size: 1.1em;
     max-width: 100%;
   }
 

src/views/SceneryView.vue

@@ -209,15 +209,15 @@ button.back-btn {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75em;
 
   .btn {
-    margin: 0.5em;
     padding: 0.5em;
     box-shadow: 0 0 10px 4px #242424;
 
     &[data-checked='true'] {
       color: var(--clr-primary);
-      font-weight: bold;
     }
   }
 }