design update & fixes

src/components/app/Footer.vue

@@ -3,35 +3,32 @@
     <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") }}
+          {{ $t('footer.tos') }}
         </a>
       </template>
     </i18n-t>
 
     <div class="text--grayed" v-if="store.stockData">
-      {{ $t("footer.version-check", { version: store.stockData.version }) }}
+      {{ $t('footer.version-check', { version: store.stockData.version }) }}
     </div>
 
     <div>
       &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank"
-        >Spythere</a
-      >
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION
-      }}{{ !isOnProductionHost ? "dev" : "" }}
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
     </div>
   </footer>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import packageInfo from "../../../package.json";
-import { useStore } from "../../store";
+import { defineComponent } from 'vue';
+import packageInfo from '../../../package.json';
+import { useStore } from '../../store';
 
 export default defineComponent({
   data() {
     return {
-      isOnProductionHost: location.hostname == "pojazdownik-td2.web.app",
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
       VERSION: packageInfo.version,
       store: useStore(),
     };
@@ -41,12 +38,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 footer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-
   text-align: center;
   padding: 1em 1em 0 1em;
-  margin-top: auto;
 }
 </style>

src/components/app/MainContainer.vue

@@ -28,10 +28,9 @@ main {
 
   width: 100%;
   max-width: 1350px;
-  min-height: 75vh;
 
   grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(400px, 1fr);
+  grid-template-rows: auto 360px minmax(300px, 1fr);
 
   background-color: darken($color: $bgColor, $amount: 5);
   border-radius: 1em;

src/components/tabs/StockListTab.vue

@@ -470,7 +470,7 @@ export default defineComponent({
 ul {
   position: relative;
   overflow: auto;
-  height: 500px;
+  height: 550px;
 }
 
 ul > li {

src/views/AppContainerView.vue

@@ -26,12 +26,12 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .app-container {
-  min-height: 100vh;
-
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
+  flex-direction: column;
 
+  min-height: 100vh;
   padding: 0.5em;
 }
 </style>