chore(app): responsiveness adjustments

src/components/tabs/StorageTab.vue

@@ -6,7 +6,6 @@
     </div>
 
     <div class="tab_content">
-      <div class="storage-list-wrapper">
       <transition-group name="storage-list-anim" tag="ul" class="storage-list">
         <li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
           <div class="storage-item-top">
@@ -51,7 +50,6 @@
         </li>
       </transition-group>
     </div>
-    </div>
   </section>
 </template>
 
@@ -157,9 +155,7 @@ export default defineComponent({
 
 .tab_content {
   overflow: auto;
-}
-
-.storage-list-wrapper {
+  margin-top: 1em;
   position: relative;
 }
 
@@ -167,7 +163,6 @@ ul.storage-list {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
-  margin-top: 0.5em;
 }
 
 ul.storage-list > li {
@@ -181,12 +176,14 @@ ul.storage-list > li {
 
 .storage-item-top {
   display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.5em;
 }
 
 .storage-item-top > h3 {
-  width: 100%;
+  min-width: 350px;
   text-align: left;
   margin: 0;
 }
@@ -215,7 +212,7 @@ ul.storage-list > li {
   &-move,
   &-enter-active,
   &-leave-active {
-    transition: all 120ms ease-in-out;
+    transition: all 100ms ease-in-out;
   }
 
   &-enter-from {

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

@@ -11,6 +11,7 @@
         <li
           v-for="(stock, i) in store.stockList"
           :key="stock.id"
+          class="stock-item"
           :class="{ loco: isTractionUnit(stock.vehicleRef) }"
           tabindex="0"
           @click="onListItemClick(i)"
@@ -150,6 +151,7 @@ export default defineComponent({
   border-radius: 0.5em;
   padding: 0.75em;
   font-weight: bold;
+  width: 100%;
 }
 
 ul {
@@ -160,7 +162,6 @@ ul > li {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-width: 500px;
   white-space: nowrap;
 
   margin: 0.25em 0;