Responsive Layout for Equipment Containers

- Added responsive CSS for mobile (<768px) and tablet (769px-1024px)
- Implemented flex-wrap layout that automatically stacks items in rows of 4 on smaller

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

@@ -218,19 +218,13 @@
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.5rem;
-    max-width: 400px;
+
-    width: 100%;
+    // somehow the browser felt like setting this 398px instead
+    // 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 {
@@ -257,28 +251,6 @@
     ::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,6 +120,7 @@
         <div
           slot="drawer-slider"
           class="equipment items items-one-line"
+          :class="getContainerClass()"
         >
           <item
             v-for="(label, group) in gearTypesToStrings"
@@ -238,6 +239,86 @@
   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>
@@ -351,6 +432,7 @@ export default {
       searchText: null,
       searchTextThrottled: null,
       costumeMode: false,
+      windowWidth: window.innerWidth,
       groupByItems: [
         'type', 'class',
       ],
@@ -523,8 +605,27 @@ 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,12 +12,6 @@
   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 {
@@ -29,19 +23,6 @@
   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,13 +269,7 @@
 
     .modal-dialog {
       width: 448px;
-      max-width: calc(100vw - 20px);
       box-sizing: border-box;
-      display: flex;
-
-      @media (max-width: 468px) {
-        width: 100%;
-      }
     }
 
     .badge-dialog {
@@ -352,23 +346,7 @@
 
     .content {
       text-align: center;
-      width: 100%;
+      width: 448px;
-      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,22 +111,6 @@
 
     .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,28 +165,6 @@
     .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: $green-50;
+    background-color: $purple-300;
   }
 
   .toggle-switch-inner:after {