fix: responsiveness

src/components/sections/TabsSection.vue

@@ -105,15 +105,13 @@ onMounted(() => {
   margin-bottom: 1em;
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: global.$breakpointSm) {
   .tabs-modes {
     grid-template-areas:
       'stock wiki'
       'storage storage'
       'numgen stockgen';
     grid-template-columns: repeat(2, 1fr);
-
-    // grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
 }
 </style>

src/components/tabs/StockListTab.vue

@@ -631,11 +631,15 @@ export default defineComponent({
   display: grid;
   gap: 0.5em;
 
-  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 
   button {
     width: 100%;
 
+    &[data-button-tooltip] {
+      font-size: 0.85em;
+    }
+
     input {
       opacity: 0;
       width: 0;

src/components/tabs/StorageTab.vue

@@ -11,7 +11,6 @@
           <li
             v-for="(stockString, stockName) in store.storageStockData"
             :key="stockName"
-            :data-current="store.chosenStorageStockName == stockName"
           >
             <div class="storage-item-top">
               <button class="btn btn--text btn-name" @click="chooseStorageStock(stockName)">
@@ -73,7 +72,6 @@ export default defineComponent({
 
   data: () => ({
     store: useStore(),
-
     expandedEntries: [] as string[],
   }),
 
@@ -93,6 +91,7 @@ export default defineComponent({
       try {
         this.loadStockFromString(this.store.storageStockData[stockName]);
         this.store.chosenStorageStockName = stockName;
+        this.$router.push('/');
       } catch (error) {
         console.log(error);
       }
@@ -117,6 +116,8 @@ export default defineComponent({
 
 .storage-list-wrapper {
   position: relative;
+  height: 730px;
+  overflow: auto;
 }
 
 ul.storage-list {