From f63defa88320f333bd3f01d3865c0a878d66e966 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Fri, 3 Apr 2026 18:55:33 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20overflow=20=E2=80=94=20inv-row-?=
 =?UTF-8?q?right=20shrink=20+=20filter-chip-row=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/InventoryList.vue | 14 ++++++++++++++
 frontend/src/theme.css                    |  2 ++
 2 files changed, 16 insertions(+)

diff --git a/frontend/src/components/InventoryList.vue b/frontend/src/components/InventoryList.vue
index 320167d..9fe8771 100644
--- a/frontend/src/components/InventoryList.vue
+++ b/frontend/src/components/InventoryList.vue
@@ -765,6 +765,7 @@ function getItemClass(item: InventoryItem): string {
   flex-direction: column;
   gap: var(--spacing-md);
   padding: var(--spacing-xs) 0 0;
+  overflow-x: hidden;  /* prevent item rows from expanding page width on mobile */
 }
 
 /* ============================================
@@ -1269,6 +1270,19 @@ function getItemClass(item: InventoryItem): string {
   .inv-actions {
     gap: 1px;
   }
+
+  /* Prevent right section from blowing out row width on narrow screens */
+  .inv-row-right {
+    flex-shrink: 1;
+    min-width: 0;
+    gap: var(--spacing-xs);
+  }
+
+  /* Shrink action buttons slightly on mobile */
+  .inv-row-right .btn-icon {
+    width: 28px;
+    height: 28px;
+  }
 }
 
 /* Very narrow phones (360px and below): hide mode button labels, keep icons */
diff --git a/frontend/src/theme.css b/frontend/src/theme.css
index b03d026..ed851dd 100644
--- a/frontend/src/theme.css
+++ b/frontend/src/theme.css
@@ -389,6 +389,8 @@
   overflow-x: auto;
   padding-bottom: var(--spacing-xs);
   scrollbar-width: none;
+  min-width: 0;    /* allow flex item to shrink below content; lets overflow-x scroll internally */
+  width: 100%;
 }
 
 .filter-chip-row::-webkit-scrollbar {