Fix shop tabs overflow off screen at certain zoom levels

Fix quest cards get cut off on small screens
Fix pop-up windows extend past screen edges on mobile

website/client/src/components/groups/questDetailModal.vue

@@ -218,13 +218,19 @@
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.5rem;
-
+    max-width: 400px;
-    // somehow the browser felt like setting this 398px instead
+    width: 100%;
-    // now its fixed to 400 :)
-    width: 400px;
-
     margin-bottom: 1.5rem;
 
+    @media (max-width: 589px) {
+      max-width: 100%;
+      justify-content: center;
+    }
+
+    @media (max-width: 353px) {
+      gap: 0.25rem;
+    }
+
     .quest-col {
       ::v-deep {
         .item-wrapper {
@@ -251,6 +257,28 @@
     ::v-deep & {
       .modal-dialog {
         width: 448px !important;
+        max-width: calc(100vw - 20px);
+        margin: 0.5rem auto;
+        display: flex;
+
+        @media (max-width: 468px) {
+          width: 100% !important;
+        }
+
+        @media (max-width: 353px) {
+          width: 100% !important;
+          margin: 0.25rem auto;
+        }
+      }
+
+      .modal-content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        @media (max-width: 300px) {
+          border-radius: 0;
+        }
       }
     }
 

website/client/src/components/inventory/equipment/index.vue

@@ -120,7 +120,6 @@
         <div
           slot="drawer-slider"
           class="equipment items items-one-line"
-          :class="getContainerClass()"
         >
           <item
             v-for="(label, group) in gearTypesToStrings"
@@ -239,86 +238,6 @@
   background: $gray-10 !important;
 }
 
-@media (max-width: 768px) {
-  .equipment.items.items-one-line {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 12px;
-    padding: 0 8px;
-
-    .item-wrapper {
-      flex: 0 0 auto;
-      margin-right: 0;
-      margin-bottom: 8px;
-    }
-
-    &.equipment-scale-default .item-wrapper {
-      .item {
-        width: 94px;
-        height: 92px;
-      }
-      .item-label {
-        width: 94px;
-        font-size: 12px;
-      }
-    }
-
-    &.equipment-scale-small .item-wrapper {
-      .item {
-        width: 70px;
-        height: 70px;
-      }
-      .item-label {
-        width: 70px;
-        font-size: 10px;
-      }
-    }
-
-    .item-wrapper:nth-child(4n+1) {
-      clear: left;
-    }
-  }
-}
-
-@media (min-width: 769px) and (max-width: 1024px) {
-  .equipment.items.items-one-line {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 12px;
-    padding: 0 12px;
-
-    .item-wrapper {
-      flex: 0 0 auto;
-      margin-right: 0;
-      margin-bottom: 8px;
-    }
-
-    &.equipment-scale-default .item-wrapper {
-      .item {
-        width: 84px;
-        height: 82px;
-      }
-      .item-label {
-        width: 84px;
-        font-size: 11px;
-      }
-    }
-
-    &.equipment-scale-small .item-wrapper {
-      .item {
-        width: 65px;
-        height: 65px;
-      }
-      .item-label {
-        width: 65px;
-        font-size: 10px;
-      }
-    }
-  }
-}
-
 </style>
 
 <style lang="scss" scoped>
@@ -432,7 +351,6 @@ export default {
       searchText: null,
       searchTextThrottled: null,
       costumeMode: false,
-      windowWidth: window.innerWidth,
       groupByItems: [
         'type', 'class',
       ],
@@ -605,27 +523,8 @@ export default {
       subSection: this.$t('equipment'),
       section: this.$t('inventory'),
     });
-
-    this.handleResize = throttle(() => {
-      this.windowWidth = window.innerWidth;
-    }, 250);
-    window.addEventListener('resize', this.handleResize);
-  },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.handleResize);
   },
   methods: {
-    getContainerClass () {
-      const equippedCount = Object.keys(this.gearTypesToStrings).filter(group => {
-        const item = this.flatGear[this.activeItems[group]];
-        return item && item.key.indexOf('_base_0') === -1;
-      }).length;
-
-      if (this.windowWidth <= 1024) {
-        return equippedCount > 4 ? 'equipment-scale-small' : 'equipment-scale-default';
-      }
-      return '';
-    },
     selectDrawerTab (tabName) {
       let tabNameValue;
       if (tabName === 'costume') {

website/client/src/components/secondaryMenu.vue

@@ -12,6 +12,12 @@
   box-shadow: 0 1px 2px 0 rgba($black, 0.2);
   z-index: 9;
   height: 3rem;
+  flex-wrap: wrap;
+
+  @media (max-width: 683px) {
+    height: auto;
+    min-height: 3rem;
+  }
 }
 
 .nav-link {
@@ -23,6 +29,19 @@
   padding: 0.75rem;
 
   color: $gray-50;
+  white-space: nowrap;
+
+  @media (max-width: 683px) {
+    padding: 0.5rem;
+    font-size: 13px;
+    flex: 1 1 auto;
+    min-width: fit-content;
+  }
+
+  @media (max-width: 576px) {
+    padding: 0.5rem 0.4rem;
+    font-size: 12px;
+  }
 
   &.active {
     color: $purple-300;

website/client/src/components/shops/buyModal.vue

@@ -269,7 +269,13 @@
 
     .modal-dialog {
       width: 448px;
+      max-width: calc(100vw - 20px);
       box-sizing: border-box;
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100%;
+      }
     }
 
     .badge-dialog {
@@ -346,7 +352,23 @@
 
     .content {
       text-align: center;
-      width: 448px;
+      width: 100%;
+      max-width: 448px;
+      margin: 0 auto;
+
+      @media (max-width: 468px) {
+        max-width: 100%;
+      }
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .item-wrapper {

website/client/src/components/shops/market/sellModal.vue

@@ -111,6 +111,22 @@
 
     .modal-dialog {
       width: 448px;
+      max-width: calc(100vw - 20px);
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100%;
+      }
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .modal-body {

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -165,6 +165,28 @@
     .modal-dialog {
       margin-top: 8%;
       width: 448px !important;
+      max-width: calc(100vw - 20px);
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100% !important;
+        margin: 0.5rem auto;
+        margin-top: 2%;
+      }
+
+      @media (max-width: 353px) {
+        margin: 0.25rem auto;
+      }
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .content {

website/client/src/components/ui/toggleSwitch.vue

@@ -111,7 +111,7 @@
   .toggle-switch-inner:before {
     content: "";
     padding-left: 10px;
-    background-color: $purple-300;
+    background-color: $green-50;
   }
 
   .toggle-switch-inner:after {