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;