From 744804d445e164596d5abb4f4216623e627c7a57 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 8 Mar 2025 20:37:00 +0100
Subject: [PATCH] fix: responsiveness

---
 src/components/sections/TabsSection.vue | 4 +---
 src/components/tabs/StockListTab.vue    | 6 +++++-
 src/components/tabs/StorageTab.vue      | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/sections/TabsSection.vue b/src/components/sections/TabsSection.vue
index f19182c..057fff8 100644
--- a/src/components/sections/TabsSection.vue
+++ b/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>
diff --git a/src/components/tabs/StockListTab.vue b/src/components/tabs/StockListTab.vue
index 620c9cc..5b56c7f 100644
--- a/src/components/tabs/StockListTab.vue
+++ b/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;
diff --git a/src/components/tabs/StorageTab.vue b/src/components/tabs/StorageTab.vue
index 18d6d40..9331c32 100644
--- a/src/components/tabs/StorageTab.vue
+++ b/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 {