refactor(app): refreshed app's look&feel, improved responsiveness, viewport width and elements' alignment

src/components/app/Footer.vue

@@ -1,12 +1,10 @@
 <template>
   <footer>
-    <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
-      <template #tos>
-        <a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
-          {{ $t('footer.tos') }}
-        </a>
-      </template>
-    </i18n-t>
+    <div>
+      &copy;
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
+    </div>
 
     <div class="text--grayed" v-if="store.vehiclesData">
       {{
@@ -17,12 +15,6 @@
         })
       }}
     </div>
-
-    <div>
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
-    </div>
   </footer>
 </template>
 
@@ -66,6 +58,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 footer {
   text-align: center;
-  padding: 1em 1em 0 1em;
+  padding-bottom: 0.5em;
 }
 </style>

src/components/app/MainContainer.vue

@@ -26,17 +26,14 @@ main {
   display: grid;
   gap: 1em;
 
-  width: 100%;
-  max-width: 1350px;
+  width: 100vw;
+  max-width: 1600px;
 
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(300px, 1fr);
+  grid-template-columns: minmax(380px, 1fr) 3fr;
+  grid-template-rows: auto 350px minmax(300px, 1fr);
 
-  background-color: var(--bgColorDarker);
   border-radius: 1em;
-
-  min-height: 950px;
-
+  overflow: hidden;
   padding: 1em;
 }
 
@@ -45,6 +42,7 @@ main {
     display: flex;
     flex-direction: column;
     gap: 1em;
+    height: auto;
   }
 }
 </style>

src/components/sections/TabsSection.vue

@@ -1,17 +1,9 @@
 <template>
   <section class="tabs-section">
     <div class="tabs-modes">
-      <router-link
-        v-for="(route, i) in routes"
-        :key="route.name"
-        class="link-btn"
-        :to="route.href"
-        :style="{ 'grid-area': route.name }"
-      >
+      <router-link v-for="(route, i) in routes" :key="route.name" class="link-btn" :to="route.href" :style="{ 'grid-area': route.name }">
         <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route.name}`) }}
-        <span class="text--grayed" v-if="route.name == 'stock'"
-          >({{ store.stockList.length }})</span
-        >
+        <span class="text--grayed" v-if="route.name == 'stock'">({{ store.stockList.length }})</span>
       </router-link>
     </div>
 
@@ -68,7 +60,7 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @use '@/styles/responsive';
 
 // Tab change animation
@@ -86,6 +78,10 @@ onMounted(() => {
 
 // Section styles
 .tabs-section {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 1em;
+
   grid-row: 1 / 4;
   grid-column: 2;
 
@@ -95,16 +91,18 @@ onMounted(() => {
 
 .tabs-modes {
   display: grid;
-  grid-template-areas:
-    'stock stock wiki wiki storage storage'
-    'numgen numgen numgen stockgen stockgen stockgen';
-  grid-template-columns: repeat(6, 1fr);
-  // grid-template-rows: 1fr 1fr;
-  padding: 1px;
-
   gap: 0.5em;
+  grid-template-areas: 'stock wiki storage numgen stockgen';
 
-  margin-bottom: 1em;
+  padding: 1px;
+}
+
+@media only screen and (max-width: 1200px) {
+  .tabs-modes {
+    grid-template-areas:
+      'stock stock wiki wiki storage storage'
+      'numgen numgen numgen stockgen stockgen stockgen';
+  }
 }
 
 @include responsive.smallScreen {
@@ -116,4 +114,10 @@ onMounted(() => {
     grid-template-columns: repeat(2, 1fr);
   }
 }
+
+@include responsive.midScreen {
+  .tabs-section {
+    min-height: 100vh;
+  }
+}
 </style>

src/components/sections/TrainImageSection.vue

@@ -5,10 +5,7 @@
         <img
           :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
           :data-preview-available="isDataPreviewAvailable"
-          :data-sponsor-only="
-            store.chosenVehicle.sponsorOnlyTimestamp &&
-            store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
-          "
+          :data-sponsor-only="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()"
           :data-team-only="store.chosenVehicle.teamOnly"
           @click="onImageClick"
           @keydown.enter="onImageClick"
@@ -21,23 +18,15 @@
       <div class="image-info">
         <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
         <b style="color: #ccc">
-          {{
-            $t(
-              `preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
-            )
-          }}
+          {{ $t(`preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`) }}
         </b>
 
         <div style="color: #ccc">
           <div>
-            {{ store.chosenVehicle.length }}m |
-            {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t |
-            {{ store.chosenVehicle.maxSpeed }} km/h
+            {{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h
           </div>
 
-          <div v-if="isTractionUnit(store.chosenVehicle)">
-            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
-          </div>
+          <div v-if="isTractionUnit(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>
 
           <div v-else>
             {{
@@ -47,18 +36,10 @@
             }}
           </div>
 
-          <b
-            v-if="
-              store.chosenVehicle.sponsorOnlyTimestamp &&
-              store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
-            "
-            class="sponsor-only"
-          >
+          <b v-if="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()" class="sponsor-only">
             {{
               $t('preview.sponsor-only', [
-                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString(
-                  $i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
-                ),
+                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
               ])
             }}
           </b>
@@ -164,8 +145,8 @@ export default defineComponent({
 
   & > div {
     position: relative;
-    max-width: 100%;
-    width: 380px;
+    width: 100%;
+    max-width: 380px;
   }
 }
 

src/components/tabs/NumberGeneratorTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="number-generator tab">
+  <div class="number-generator-tab">
     <div class="tab_header">
       <h2>{{ $t('numgen.title') }}</h2>
       <h3>{{ $t('numgen.subtitle') }}</h3>
@@ -227,6 +227,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 @use '@/styles/tab';
 @use '@/styles/responsive';
 
+.number-generator-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  overflow: auto;
+}
+
 .category-select {
   select {
     width: auto;
@@ -283,7 +290,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 }
 
 @include responsive.midScreen {
-  .number-generator {
+  .number-generator-tab {
     min-height: 100vh;
   }
 }

src/components/tabs/StockGeneratorTab.vue

@@ -1,98 +1,96 @@
 <template>
-  <div class="stock-generator tab">
-    <div class="tab_content">
-      <div>
-        <h2>{{ $t('stockgen.properties-title') }}</h2>
+  <div class="stock-generator-tab">
+    <div>
+      <h2>{{ $t('stockgen.properties-title') }}</h2>
 
-        <b class="text--accent">
-          {{ $t('stockgen.properties-desc') }}
-        </b>
+      <b class="text--accent">
+        {{ $t('stockgen.properties-desc') }}
+      </b>
 
-        <div class="inputs">
-          <label>
-            <span>{{ $t('stockgen.input-mass') }}</span>
-            <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
-          </label>
+      <div class="inputs">
+        <label>
+          <span>{{ $t('stockgen.input-mass') }}</span>
+          <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
+        </label>
 
-          <label>
-            <span>{{ $t('stockgen.input-length') }}</span>
-            <input type="number" v-model="maxLength" step="25" max="650" min="0" />
-          </label>
+        <label>
+          <span>{{ $t('stockgen.input-length') }}</span>
+          <input type="number" v-model="maxLength" step="25" max="650" min="0" />
+        </label>
 
-          <label>
-            <span>{{ $t('stockgen.input-carcount') }}</span>
-            <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
-          </label>
-        </div>
+        <label>
+          <span>{{ $t('stockgen.input-carcount') }}</span>
+          <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
+        </label>
+      </div>
 
-        <!-- <hr style="margin: 1em 0" /> -->
+      <!-- <hr style="margin: 1em 0" /> -->
 
-        <!-- <div class="generator_options">
+      <!-- <div class="generator_options">
           <Checkbox v-model="isCarGroupingEnabled">Grupuj wylosowane wagony (ustawia podobne wagony obok siebie w składzie)</Checkbox>
         </div>  -->
+    </div>
+
+    <div>
+      <h2>{{ $t('stockgen.cargo-title') }}</h2>
+      <b>{{ $t('stockgen.cargo-desc') }}</b>
+    </div>
+
+    <div class="generator_cargo">
+      <button
+        v-for="cargo in computedCargoData"
+        :key="cargo.name"
+        class="btn"
+        :data-chosen="chosenCargoTypes.includes(cargo.name)"
+        @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
+      >
+        {{ $t(`cargo.${cargo.name}`) }}
+      </button>
+    </div>
+
+    <div>
+      <h2>{{ $t('stockgen.chosen-title') }}</h2>
+
+      <div class="generator_warning">
+        <span v-if="computedChosenCarTypes.size == 0">
+          {{ $t('stockgen.chosen-empty-warning') }}
+        </span>
+
+        <span v-else>
+          {{ $t('stockgen.chosen-warning') }}
+        </span>
       </div>
+    </div>
 
-      <div>
-        <h2>{{ $t('stockgen.cargo-title') }}</h2>
-        <b>{{ $t('stockgen.cargo-desc') }}</b>
-      </div>
+    <div class="generator_vehicles" v-if="computedChosenCarTypes.size != 0">
+      <button
+        :data-chosen="true"
+        :data-excluded="excludedCarTypes.includes(carType)"
+        class="btn"
+        v-for="carType in computedChosenCarTypes"
+        :key="carType"
+        @mouseover="onMouseHover(carType)"
+        @mouseleave="onMouseLeave"
+        @click="toggleCarExclusion(carType)"
+      >
+        {{ carType }}
+      </button>
+    </div>
 
-      <div class="generator_cargo">
-        <button
-          v-for="cargo in computedCargoData"
-          :key="cargo.name"
-          class="btn"
-          :data-chosen="chosenCargoTypes.includes(cargo.name)"
-          @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
-        >
-          {{ $t(`cargo.${cargo.name}`) }}
-        </button>
-      </div>
+    <hr />
 
-      <div>
-        <h2>{{ $t('stockgen.chosen-title') }}</h2>
+    <div class="tab_actions">
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
+        {{ $t('stockgen.action-generate') }}
+      </button>
 
-        <div class="generator_warning">
-          <span v-if="computedChosenCarTypes.size == 0">
-            {{ $t('stockgen.chosen-empty-warning') }}
-          </span>
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
+        {{ $t('stockgen.action-generate-empty') }}
+      </button>
 
-          <span v-else>
-            {{ $t('stockgen.chosen-warning') }}
-          </span>
-        </div>
-      </div>
-
-      <div class="generator_vehicles" v-if="computedChosenCarTypes.size != 0">
-        <button
-          :data-chosen="true"
-          :data-excluded="excludedCarTypes.includes(carType)"
-          class="btn"
-          v-for="carType in computedChosenCarTypes"
-          :key="carType"
-          @mouseover="onMouseHover(carType)"
-          @mouseleave="onMouseLeave"
-          @click="toggleCarExclusion(carType)"
-        >
-          {{ carType }}
-        </button>
-      </div>
-
-      <hr />
-
-      <div class="tab_actions">
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
-          {{ $t('stockgen.action-generate') }}
-        </button>
-
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
-          {{ $t('stockgen.action-generate-empty') }}
-        </button>
-
-        <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
-          {{ $t('stockgen.action-reset') }}
-        </button>
-      </div>
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
+        {{ $t('stockgen.action-reset') }}
+      </button>
     </div>
   </div>
 </template>
@@ -290,6 +288,14 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '@/styles/tab';
 
+.stock-generator-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  overflow: auto;
+  padding: 0.5em;
+}
+
 h2 {
   margin-top: 0;
   margin-bottom: 0.5em;

src/components/tabs/StockListTab.vue

@@ -1,21 +1,19 @@
 <template>
   <section class="stock-list-tab">
-    <div class="tab_content">
-      <!-- Stock Actions -->
-      <StockActions />
+    <!-- Stock Actions -->
+    <StockActions />
 
-      <!-- Stock Specs -->
-      <StockSpecs />
+    <!-- Stock Specs -->
+    <StockSpecs />
 
-      <!-- Stock Spawn Settings -->
-      <StockSpawnSettings />
+    <!-- Stock Spawn Settings -->
+    <StockSpawnSettings />
 
-      <!-- Stock Warnings -->
-      <StockWarnings />
+    <!-- Stock Warnings -->
+    <StockWarnings />
 
-      <!-- Stock List -->
-      <StockList />
-    </div>
+    <!-- Stock List -->
+    <StockList />
   </section>
 </template>
 
@@ -42,7 +40,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '@/styles/tab';
+@use '../../styles/tab';
+
+.stock-list-tab {
+  display: grid;
+  grid-template-rows: auto auto auto auto 1fr;
+  gap: 0.5em;
+  overflow: hidden;
+}
 
 .tab_content {
   display: flex;

src/components/tabs/StorageTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="tab storage-tab">
+  <section class="storage-tab">
     <div class="tab_header">
       <h2>{{ $t('storage.title') }}</h2>
       <h3>{{ $t('storage.subtitle') }}</h3>
@@ -36,8 +36,7 @@
                 {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
               >
               <i v-if="storageEntry.updatedAt">
-                &bull; {{ $t('storage.updated-at') }}
-                {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
+                &bull; {{ $t('storage.updated-at') }} {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
               >
 
               <div style="margin-top: 0.5em">
@@ -146,14 +145,22 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '@/styles/tab';
 
+.storage-tab {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+}
+
 .tab_actions {
   grid-template-columns: repeat(2, 1fr);
 }
 
+.tab_content {
+  overflow: auto;
+}
+
 .storage-list-wrapper {
   position: relative;
-  height: 730px;
-  overflow: auto;
 }
 
 ul.storage-list {

src/components/tabs/WikiListTab.vue

@@ -1,97 +1,86 @@
 <template>
-  <section class="wiki-list tab">
-    <div class="tab_content">
-      <div class="actions">
-        <div class="action action-input">
-          <label for="search-vehicle">
-            {{ $t('wiki.labels.search-vehicle') }}
-            <button class="reset-btn" @click="resetSearchInput">
-              <img src="/images/icon-exit.svg" alt="reset vehicle input icon" />
-            </button>
-          </label>
-          <input
-            type="text"
-            id="search-vehicle"
-            name="search-vehicle"
-            :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
-            v-model="searchedVehicleTypeName"
-          />
-        </div>
-
-        <div class="action action-select">
-          <label for="filter-type">{{ $t('wiki.labels.vehicles') }}</label>
-          <select name="filter-type" id="filter-type" v-model="filterType">
-            <option v-for="filter in filters" :key="filter" :value="filter">
-              {{ $t(`wiki.filters.${filter}`) }}
-            </option>
-          </select>
-        </div>
-
-        <div class="action action-select">
-          <label for="sorter-type">{{ $t('wiki.labels.sort-by') }}</label>
-          <select name="sorter-type" id="sorter-type" v-model="sorterType">
-            <option v-for="sorter in sorters" :key="sorter" :value="sorter">
-              {{ $t(`wiki.sort-by.${sorter}`) }}
-            </option>
-          </select>
-        </div>
-
-        <div class="action action-select">
-          <label for="sorter-direction">{{ $t('wiki.labels.sort-direction') }}</label>
-
-          <select name="sorter-direction" id="sorter-direction" v-model="sorterDirection">
-            <option value="asc">{{ $t('wiki.sort-direction.asc') }}</option>
-            <option value="desc">{{ $t('wiki.sort-direction.desc') }}</option>
-          </select>
-        </div>
+  <section class="wiki-list-tab">
+    <div class="actions">
+      <div class="action action-input">
+        <label for="search-vehicle">
+          {{ $t('wiki.labels.search-vehicle') }}
+          <button class="reset-btn" @click="resetSearchInput">
+            <img src="/images/icon-exit.svg" alt="reset vehicle input icon" />
+          </button>
+        </label>
+        <input
+          type="text"
+          id="search-vehicle"
+          name="search-vehicle"
+          :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
+          v-model="searchedVehicleTypeName"
+        />
       </div>
 
-      <ul class="vehicles" ref="vehicles">
-        <li
-          v-for="vehicle in computedVehicles"
-          :key="vehicle.type"
-          :data-preview="vehicle.type === store.chosenVehicle?.type"
-          @click="previewVehicle(vehicle)"
-          @dblclick="addVehicle(vehicle)"
-          @keydown.enter="onVehicleSelect(vehicle)"
-          tabindex="0"
-        >
-          <img
-            loading="lazy"
-            width="120"
-            :src="getThumbnailURL(vehicle.type, 'small')"
-            @error="onThumbnailImageError"
-          />
+      <div class="action action-select">
+        <label for="filter-type">{{ $t('wiki.labels.vehicles') }}</label>
+        <select name="filter-type" id="filter-type" v-model="filterType">
+          <option v-for="filter in filters" :key="filter" :value="filter">
+            {{ $t(`wiki.filters.${filter}`) }}
+          </option>
+        </select>
+      </div>
 
-          <span>
-            <span
-              class="vehicle-name"
-              :class="{
-                'sponsor-only':
-                  vehicle.sponsorOnlyTimestamp && vehicle.sponsorOnlyTimestamp > Date.now(),
-                'team-only': vehicle.teamOnly,
-              }"
-            >
-              <b>{{ vehicle.type.replace(/_/g, ' ') }}</b>
-            </span>
+      <div class="action action-select">
+        <label for="sorter-type">{{ $t('wiki.labels.sort-by') }}</label>
+        <select name="sorter-type" id="sorter-type" v-model="sorterType">
+          <option v-for="sorter in sorters" :key="sorter" :value="sorter">
+            {{ $t(`wiki.sort-by.${sorter}`) }}
+          </option>
+        </select>
+      </div>
 
-            <div class="vehicle-group">
-              {{ $t(`wiki.${vehicle.group}`) }} |
-              {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
-            </div>
+      <div class="action action-select">
+        <label for="sorter-direction">{{ $t('wiki.labels.sort-direction') }}</label>
 
-            <div class="vehicle-props">
-              {{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t |
-              {{ vehicle.maxSpeed }}km/h
-            </div>
-          </span>
-        </li>
-      </ul>
-
-      <div class="no-vehicles-warning" v-if="computedVehicles.length == 0">
-        {{ $t('wiki.no-vehicles') }}
+        <select name="sorter-direction" id="sorter-direction" v-model="sorterDirection">
+          <option value="asc">{{ $t('wiki.sort-direction.asc') }}</option>
+          <option value="desc">{{ $t('wiki.sort-direction.desc') }}</option>
+        </select>
       </div>
     </div>
+
+    <ul class="vehicles" ref="vehicles">
+      <li class="no-vehicles-warning" v-if="computedVehicles.length == 0">
+        {{ $t('wiki.no-vehicles') }}
+      </li>
+
+      <li
+        v-for="vehicle in computedVehicles"
+        :key="vehicle.type"
+        :data-preview="vehicle.type === store.chosenVehicle?.type"
+        @click="previewVehicle(vehicle)"
+        @dblclick="addVehicle(vehicle)"
+        @keydown.enter="onVehicleSelect(vehicle)"
+        tabindex="0"
+      >
+        <img loading="lazy" width="120" :src="getThumbnailURL(vehicle.type, 'small')" @error="onThumbnailImageError" />
+
+        <span>
+          <span
+            class="vehicle-name"
+            :class="{
+              'sponsor-only': vehicle.sponsorOnlyTimestamp && vehicle.sponsorOnlyTimestamp > Date.now(),
+              'team-only': vehicle.teamOnly,
+            }"
+          >
+            <b>{{ vehicle.type.replace(/_/g, ' ') }}</b>
+          </span>
+
+          <div class="vehicle-group">
+            {{ $t(`wiki.${vehicle.group}`) }} |
+            {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
+          </div>
+
+          <div class="vehicle-props">{{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t | {{ vehicle.maxSpeed }}km/h</div>
+        </span>
+      </li>
+    </ul>
   </section>
 </template>
 
@@ -166,7 +155,7 @@ export default defineComponent({
 
     onThumbnailImageError(e: Event) {
       const el = e.target as HTMLImageElement;
-      
+
       if (el.src == '/images/no-vehicle-image.png') return;
       el.src = '/images/no-vehicle-image.png';
     },
@@ -181,11 +170,7 @@ export default defineComponent({
     },
 
     filterVehicles(v: IVehicle) {
-      if (
-        this.searchedVehicleTypeName != '' &&
-        !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase())
-      )
-        return false;
+      if (this.searchedVehicleTypeName != '' && !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase())) return false;
 
       switch (this.filterType) {
         case VehicleFilter.AllTractions:
@@ -247,6 +232,13 @@ export default defineComponent({
 @use '@/styles/tab';
 @use '@/styles/responsive';
 
+.wiki-list-tab {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  gap: 0.5em;
+  overflow: hidden;
+}
+
 .actions {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
@@ -284,10 +276,7 @@ export default defineComponent({
   gap: 0.5em;
   overflow: auto;
 
-  max-height: 730px;
-
-  margin-top: 0.75em;
-  padding: 0.25em;
+  margin-top: 1em;
 }
 
 .vehicles > li {
@@ -297,7 +286,6 @@ export default defineComponent({
   background-color: #161c2e;
   padding: 0.5em;
 
-  min-height: 75px;
   cursor: pointer;
 
   &[data-preview='true'] {
@@ -344,7 +332,12 @@ export default defineComponent({
   background-color: #161c2e;
 }
 
-@include responsive.smallScreen {
+@include responsive.midScreen {
+  .vehicles {
+    height: 100vh;
+    min-height: 400px;
+  }
+
   .actions-panel {
     align-items: stretch;
     flex-direction: column;

src/components/tabs/stock-list/StockList.vue

@@ -2,12 +2,12 @@
   <div class="list-wrapper">
     <StockThumbnails :onListItemClick="onListItemClick" />
 
-    <div v-if="stockIsEmpty" class="list-empty">
-      <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
-    </div>
-
-    <ul v-else>
+    <ul>
       <transition-group name="stock-list-anim">
+        <li v-if="stockIsEmpty" class="list-empty">
+          {{ $t('stocklist.list-empty') }}
+        </li>
+
         <li
           v-for="(stock, i) in store.stockList"
           :key="stock.id"
@@ -139,7 +139,10 @@ export default defineComponent({
 @use '@/styles/responsive';
 
 .list-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
   position: relative;
+  overflow: hidden;
 }
 
 .list-empty {
@@ -150,8 +153,7 @@ export default defineComponent({
 }
 
 ul {
-  overflow-y: scroll;
-  height: 500px;
+  overflow-y: auto;
 }
 
 ul > li {
@@ -159,6 +161,7 @@ ul > li {
   align-items: center;
   justify-content: space-between;
   min-width: 500px;
+  white-space: nowrap;
 
   margin: 0.25em 0;
 
@@ -239,7 +242,8 @@ li > .stock-info {
 
 @include responsive.midScreen {
   ul {
-    min-height: auto;
+    height: 100vh;
+    min-height: 400px;
   }
 }
 </style>

src/styles/_global.scss

@@ -38,7 +38,7 @@ html {
 
   font-family: Lato, sans-serif;
 
-  background-color: var(--bgColor);
+  background-color: var(--bgColorDarker);
   overflow-x: hidden;
 }
 

src/styles/_tab.scss

@@ -1,6 +1,5 @@
 .tab {
   height: 100%;
-  margin-top: 1px;
 
   &_header {
     padding: 0.5em 1em;
@@ -26,7 +25,6 @@
   }
 
   &_content {
-    margin-top: 1em;
     height: 100%;
   }
 

src/views/AppContainerView.vue

@@ -25,13 +25,22 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.app-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
+@use '../styles/responsive';
 
-  min-height: 100vh;
-  padding: 0.5em;
+.app-container {
+  display: grid;
+  justify-content: center;
+  
+  grid-template-rows: minmax(900px, 1fr) auto;
+  gap: 0.5em;
+  
+  height: 100vh;
+}
+
+@include responsive.midScreen {
+  .app-container {
+    height: auto;
+    min-height: 100vh;
+  }
 }
 </style>