From 77717c1f6b8dd8044010301827ef24131de2b5a8 Mon Sep 17 00:00:00 2001
From: Hafiz <hafizbhamidi@gmail.com>
Date: Sat, 23 May 2026 16:25:16 -0500
Subject: [PATCH] Feat(equipment): Add responsive layout for equipment items

2-up mobile, 4-up tablet, 8-up desktop
---
 .../components/inventory/equipment/index.vue  | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/website/client/src/components/inventory/equipment/index.vue b/website/client/src/components/inventory/equipment/index.vue
index 8e3c95595b..6f7675f24b 100644
--- a/website/client/src/components/inventory/equipment/index.vue
+++ b/website/client/src/components/inventory/equipment/index.vue
@@ -238,6 +238,41 @@
   background: $gray-10 !important;
 }
 
+.equipment.items.items-one-line {
+  display: flex;
+  flex-wrap: wrap;
+  white-space: normal;
+
+  > div {
+    flex: 0 0 12.5%;
+    display: flex;
+    justify-content: center;
+    margin-right: 0;
+  }
+
+  @media screen and (max-width: 1240px) {
+    > div {
+      flex-basis: 25%;
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    > div {
+      flex-basis: 50%;
+    }
+  }
+}
+
+.drawer-content:has(.equipment.items.items-one-line) {
+  @media screen and (max-width: 1240px) {
+    max-height: 400px;
+  }
+
+  @media screen and (max-width: 575px) {
+    max-height: 600px;
+  }
+}
+
 </style>
 
 <style lang="scss" scoped>