From 6ff5a5709e90b1f10a6c84ad35dda9e6d7cf1a30 Mon Sep 17 00:00:00 2001 From: pyr0ball Date: Fri, 3 Apr 2026 11:10:39 -0700 Subject: [PATCH] fix: mobile nav FOUC + Pantry scan toggle responsive layout - index.html: inline anti-FOUC CSS so sidebar stays hidden on mobile before the JS bundle hydrates (eliminates ~100ms flash of sidebar) - InventoryList: scan-mode-toggle fills card width on <=480px so buttons don't overflow; mode button labels hidden on <=360px (icons only) - Very narrow phones get icon-only mode toggle, all three buttons still accessible via aria-label --- frontend/index.html | 14 +++++++++- frontend/src/components/InventoryList.vue | 34 +++++++++++++++++++---- 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index f95f61d..d6947bc 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - + Kiwi — Pantry Tracker @@ -11,6 +11,18 @@ href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap" rel="stylesheet" /> + +
diff --git a/frontend/src/components/InventoryList.vue b/frontend/src/components/InventoryList.vue index ee04c65..320167d 100644 --- a/frontend/src/components/InventoryList.vue +++ b/frontend/src/components/InventoryList.vue @@ -507,10 +507,12 @@ const manualLoading = ref(false) onMounted(async () => { await store.fetchItems() await store.fetchStats() - // Auto-focus scanner gun input - setTimeout(() => { - scannerGunInput.value?.focus() - }, 100) + // Auto-focus scanner gun input — desktop only (avoids popping mobile keyboard) + if (!('ontouchstart' in window)) { + setTimeout(() => { + scannerGunInput.value?.focus() + }, 100) + } }) function onFilterChange() { @@ -762,7 +764,7 @@ function getItemClass(item: InventoryItem): string { display: flex; flex-direction: column; gap: var(--spacing-md); - padding: var(--spacing-xs) 0 var(--spacing-xl); + padding: var(--spacing-xs) 0 0; } /* ============================================ @@ -1231,6 +1233,16 @@ function getItemClass(item: InventoryItem): string { gap: var(--spacing-sm); } + /* Mode toggle fills the card width when header stacks */ + .scan-mode-toggle { + width: 100%; + } + + .scan-mode-btn { + flex: 1; + justify-content: center; + } + .scan-meta-row { flex-direction: column; } @@ -1259,6 +1271,18 @@ function getItemClass(item: InventoryItem): string { } } +/* Very narrow phones (360px and below): hide mode button labels, keep icons */ +@media (max-width: 360px) { + .scan-mode-btn span { + display: none; + } + + .scan-mode-btn svg { + width: 16px; + height: 16px; + } +} + @media (min-width: 481px) and (max-width: 768px) { .scan-meta-row { flex-wrap: nowrap;