Circuit-Forge/kiwi
2
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix: mobile overflow — inv-row-right shrink + filter-chip-row width

Browse source
This commit is contained in:
pyr0ball 2026-04-03 18:55:33 -07:00
parent 6791ea22b2
commit f63defa883
2 changed files with 16 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/components/InventoryList.vue
View file

@ -765,6 +765,7 @@ function getItemClass(item: InventoryItem): string {
flex-direction: column; flex-direction: column;
gap: var(--spacing-md); gap: var(--spacing-md);
padding: var(--spacing-xs) 0 0; 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 { .inv-actions {
gap: 1px; 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 */ /* Very narrow phones (360px and below): hide mode button labels, keep icons */

2
frontend/src/theme.css
View file

@ -389,6 +389,8 @@
overflow-x: auto; overflow-x: auto;
padding-bottom: var(--spacing-xs); padding-bottom: var(--spacing-xs);
scrollbar-width: none; 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 { .filter-chip-row::-webkit-scrollbar {