emeraldwalk · bmingles · Jun 27, 2026 · Jun 27, 2026 · Jun 27, 2026 · Jun 27, 2026
diff --git a/Taskfile.yml b/Taskfile.yml
@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=https://taskfile.dev/schema.json
+
+version: '3'
+
+vars:
+  GREETING: Hello, world!
+
+tasks:
+  default:
+    desc: Print a greeting message
+    cmds:
+      - echo "{{.GREETING}}"
+    silent: true
+
+  start:
+    cmds:
+      - cd pwa && npm start
diff --git a/pwa/index.html b/pwa/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
     <title>Tag Notes</title>
 
     <meta name="theme-color" content="#2f6f4f" />

diff --git a/pwa/src/App.module.css b/pwa/src/App.module.css
@@ -7,5 +7,6 @@
 .content {
   flex: 1;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding-bottom: calc(56px + env(safe-area-inset-bottom));
 }
diff --git a/pwa/src/components/NavBar.module.css b/pwa/src/components/NavBar.module.css
@@ -8,6 +8,8 @@
   padding: 0.75rem 1rem;
   background: #fff;
   border-bottom: 1px solid #e5e5ea;
+  transform: translateZ(0);
+  will-change: transform;
 }
 
 .side {

diff --git a/pwa/src/index.css b/pwa/src/index.css
@@ -8,8 +8,16 @@ body,
   height: 100%;
 }
 
+html {
+  overscroll-behavior: none;
+  touch-action: pan-x pan-y;
+}
+
 body {
   margin: 0;
+  overflow: hidden;
+  position: fixed;
+  inset: 0;
   font-family:
     -apple-system,
     BlinkMacSystemFont,
@@ -19,4 +27,5 @@ body {
     Arial,
     sans-serif;
   -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
 }
diff --git a/pwa/src/routes/Food.module.css b/pwa/src/routes/Food.module.css
@@ -2,9 +2,15 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
   padding: 1rem;
   gap: 1rem;
-  overflow-y: auto;
 }
 
 .stats {

diff --git a/pwa/src/routes/Food.tsx b/pwa/src/routes/Food.tsx
@@ -117,135 +117,137 @@ function Food() {
   return (
     <div class={styles.container}>
       <NavBar title="Today" action={{ label: 'History', href: '/food/history' }} />
-      <div class={styles.stats}>
-        <div class={styles.remainingRow}>
-          <div class={styles.remainingCard}>
-            <div class={styles.remainingValue}>{remainingProtein()}g</div>
-            <div class={styles.remainingLabel}>protein left</div>
+      <div class={styles.body}>
+        <div class={styles.stats}>
+          <div class={styles.remainingRow}>
+            <div class={styles.remainingCard}>
+              <div class={styles.remainingValue}>{remainingProtein()}g</div>
+              <div class={styles.remainingLabel}>protein left</div>
+            </div>
+            <div class={styles.remainingCard}>
+              <div class={styles.remainingValue}>{remainingCalories()}</div>
+              <div class={styles.remainingLabel}>calories left</div>
+            </div>
           </div>
-          <div class={styles.remainingCard}>
-            <div class={styles.remainingValue}>{remainingCalories()}</div>
-            <div class={styles.remainingLabel}>calories left</div>
+          <div class={styles.detailRow}>
+            <span>
+              {Math.round(totals().protein)}g / {targets().protein}g protein
+            </span>
+            <span>
+              {Math.round(totals().calories)} / {targets().calories} cal
+            </span>
+            <span>{Math.round(totals().carbs)}g carbs</span>
           </div>
         </div>
-        <div class={styles.detailRow}>
-          <span>
-            {Math.round(totals().protein)}g / {targets().protein}g protein
-          </span>
-          <span>
-            {Math.round(totals().calories)} / {targets().calories} cal
-          </span>
-          <span>{Math.round(totals().carbs)}g carbs</span>
-        </div>
-      </div>
 
-      <form class={styles.form} onSubmit={(event) => void handleSubmit(event)}>
-        <input
-          type="text"
-          class={styles.nameInput}
-          placeholder="Food name"
-          value={form().name}
-          onInput={(event) => updateField('name', event.currentTarget.value)}
-        />
-        <div class={styles.macroRow}>
-          <input
-            type="number"
-            inputmode="decimal"
-            class={styles.macroInput}
-            placeholder="Protein (g)"
-            value={form().protein}
-            onInput={(event) => updateField('protein', event.currentTarget.value)}
-          />
-          <input
-            type="number"
-            inputmode="decimal"
-            class={styles.macroInput}
-            placeholder="Calories (cal)"
-            value={form().calories}
-            onInput={(event) => updateField('calories', event.currentTarget.value)}
-          />
+        <form class={styles.form} onSubmit={(event) => void handleSubmit(event)}>
           <input
-            type="number"
-            inputmode="decimal"
-            class={styles.macroInput}
-            placeholder="Carbs (g)"
-            value={form().carbs}
-            onInput={(event) => updateField('carbs', event.currentTarget.value)}
+            type="text"
+            class={styles.nameInput}
+            placeholder="Food name"
+            value={form().name}
+            onInput={(event) => updateField('name', event.currentTarget.value)}
           />
-        </div>
-        <div class={styles.quantityRow}>
-          <input
-            type="number"
-            inputmode="decimal"
-            class={styles.quantityInput}
-            placeholder="Qty"
-            value={form().quantity}
-            onInput={(event) => updateField('quantity', event.currentTarget.value)}
-          />
-          <button type="submit" class={styles.addButton}>
-            {editingId() ? 'Save Changes' : 'Add'}
-          </button>
-          <Show when={editingId()}>
-            <button type="button" class={styles.cancelButton} onClick={handleCancelEdit}>
-              Cancel
+          <div class={styles.macroRow}>
+            <input
+              type="number"
+              inputmode="decimal"
+              class={styles.macroInput}
+              placeholder="Protein (g)"
+              value={form().protein}
+              onInput={(event) => updateField('protein', event.currentTarget.value)}
+            />
+            <input
+              type="number"
+              inputmode="decimal"
+              class={styles.macroInput}
+              placeholder="Calories (cal)"
+              value={form().calories}
+              onInput={(event) => updateField('calories', event.currentTarget.value)}
+            />
+            <input
+              type="number"
+              inputmode="decimal"
+              class={styles.macroInput}
+              placeholder="Carbs (g)"
+              value={form().carbs}
+              onInput={(event) => updateField('carbs', event.currentTarget.value)}
+            />
+          </div>
+          <div class={styles.quantityRow}>
+            <input
+              type="number"
+              inputmode="decimal"
+              class={styles.quantityInput}
+              placeholder="Qty"
+              value={form().quantity}
+              onInput={(event) => updateField('quantity', event.currentTarget.value)}
+            />
+            <button type="submit" class={styles.addButton}>
+              {editingId() ? 'Save Changes' : 'Add'}
             </button>
-          </Show>
-        </div>
-      </form>
-
-      <Show when={recentFoods().length > 0}>
-        <div class={styles.recentSection}>
-          <div class={styles.sectionTitle}>Recent foods</div>
-          <div class={styles.recentList}>
-            <For each={recentFoods()}>
+            <Show when={editingId()}>
+              <button type="button" class={styles.cancelButton} onClick={handleCancelEdit}>
+                Cancel
+              </button>
+            </Show>
+          </div>
+        </form>
+
+        <Show when={recentFoods().length > 0}>
+          <div class={styles.recentSection}>
+            <div class={styles.sectionTitle}>Recent foods</div>
+            <div class={styles.recentList}>
+              <For each={recentFoods()}>
+                {(entry) => (
+                  <button
+                    type="button"
+                    class={styles.recentChip}
+                    onClick={() => handleSelectRecent(entry)}
+                  >
+                    {entry.name}
+                  </button>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+
+        <Show
+          when={todayEntries().length > 0}
+          fallback={<div class={styles.emptyState}>No food logged today</div>}
+        >
+          <div class={styles.list}>
+            <For each={todayEntries()}>
               {(entry) => (
-                <button
-                  type="button"
-                  class={styles.recentChip}
-                  onClick={() => handleSelectRecent(entry)}
-                >
-                  {entry.name}
-                </button>
+                <div class={styles.row} classList={{ [styles.rowEditing]: editingId() === entry.id }}>
+                  <button type="button" class={styles.rowMain} onClick={() => handleEdit(entry)}>
+                    <div class={styles.rowName}>
+                      {entry.name}
+                      <Show when={entry.quantity !== 1}>
+                        <span class={styles.rowQuantity}> x{entry.quantity}</span>
+                      </Show>
+                    </div>
+                    <div class={styles.rowMacros}>
+                      {Math.round(entry.protein * entry.quantity)}g protein ·{' '}
+                      {Math.round(entry.calories * entry.quantity)} cal ·{' '}
+                      {Math.round(entry.carbs * entry.quantity)}g carbs
+                    </div>
+                  </button>
+                  <button
+                    type="button"
+                    class={styles.removeButton}
+                    onClick={() => void handleRemove(entry.id)}
+                    aria-label={`Remove ${entry.name}`}
+                  >
+                    ×
+                  </button>
+                </div>
               )}
             </For>
           </div>
-        </div>
-      </Show>
-
-      <Show
-        when={todayEntries().length > 0}
-        fallback={<div class={styles.emptyState}>No food logged today</div>}
-      >
-        <div class={styles.list}>
-          <For each={todayEntries()}>
-            {(entry) => (
-              <div class={styles.row} classList={{ [styles.rowEditing]: editingId() === entry.id }}>
-                <button type="button" class={styles.rowMain} onClick={() => handleEdit(entry)}>
-                  <div class={styles.rowName}>
-                    {entry.name}
-                    <Show when={entry.quantity !== 1}>
-                      <span class={styles.rowQuantity}> x{entry.quantity}</span>
-                    </Show>
-                  </div>
-                  <div class={styles.rowMacros}>
-                    {Math.round(entry.protein * entry.quantity)}g protein ·{' '}
-                    {Math.round(entry.calories * entry.quantity)} cal ·{' '}
-                    {Math.round(entry.carbs * entry.quantity)}g carbs
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  class={styles.removeButton}
-                  onClick={() => void handleRemove(entry.id)}
-                  aria-label={`Remove ${entry.name}`}
-                >
-                  ×
-                </button>
-              </div>
-            )}
-          </For>
-        </div>
-      </Show>
+        </Show>
+      </div>
     </div>
   );
 }