miniaturki: style

src/App.vue

@@ -86,7 +86,6 @@ export default defineComponent({
 
   display: flex;
   flex-direction: column;
-  padding: 1em;
 }
 
 /* APP */
@@ -95,6 +94,7 @@ export default defineComponent({
 
   color: $textColor;
   font-size: 1em;
+  padding: 1em;
 
   display: flex;
   justify-content: center;

src/components/StockListTab.vue

@@ -91,22 +91,6 @@
       </span>
     </div>
 
-    <div class="stock_thumbnails" ref="thumbnails">
-      <div v-for="(stock, stockIndex) in store.stockList" :data-selected="store.chosenStockListIndex == stockIndex">
-        <img
-          v-for="i in stock.count"
-          @click="onListItemClick(stockIndex)"
-          :key="stock.id"
-          :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
-          :alt="stock.type"
-          :title="stock.type"
-          @error="stockImageError($event, stock)"
-        />
-
-        <!-- <b>{{ stock.type }}</b> -->
-      </div>
-    </div>
-
     <div class="stock_warnings">
       <div class="warning" v-if="locoNotSuitable">
         Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
@@ -133,6 +117,21 @@
       <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
     </div>
 
+    <div class="stock_thumbnails" ref="thumbnails">
+      <div v-for="(stock, stockIndex) in store.stockList" :data-selected="store.chosenStockListIndex == stockIndex">
+        <span v-for="i in stock.count" @click="onListItemClick(stockIndex)" :key="stock.id">
+          <b>{{ stock.type }}</b>
+
+          <img
+            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
+            :alt="stock.type"
+            :title="stock.type"
+            @error="stockImageError($event, stock)"
+          />
+        </span>
+      </div>
+    </div>
+
     <!-- Stock list -->
     <ul ref="list">
       <li v-if="store.stockList.length == 0" class="list-empty">
@@ -214,6 +213,8 @@ export default defineComponent({
   watch: {
     'store.chosenStockListIndex': {
       handler(id: number) {
+        if (id < 0) return;
+
         (this.$refs['thumbnails'] as HTMLElement)
           .querySelector(`div:nth-child(${id + 1})`)
           ?.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
@@ -488,7 +489,7 @@ ul {
 
   overflow: auto;
 
-  height: 70vh;
+  height: 500px;
 }
 
 ul > li {
@@ -530,6 +531,10 @@ li > .stock-info {
   }
 }
 
+.stock_warnings {
+  margin: 0.5em 0; 
+}
+
 .stock-info {
   &__no,
   &__type {
@@ -596,12 +601,20 @@ li > .stock-info {
     &[data-selected='true'] {
       background-color: rebeccapurple;
     }
+
+    span {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5em;
+      padding: 0.5em 0;
+
+      text-align: center;
+
+      font-size: 0.85em;
+    }
   }
 
   img {
-    margin: 0.5em 0;
-
-    // max-width: 150px;
     max-height: 60px;
   }
 }