From e064ee3aef35c242b45b6bbd14fcb286dda5f1fb Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 27 Jun 2026 21:18:04 +0000 Subject: [PATCH 1/4] Lock viewport zoom and outer scroll to feel more like a native app Pinch-zoom, double-tap-zoom, and elastic overscroll bouncing on the outer page made the PWA feel like a website instead of an installed app. Disable zoom via the viewport meta, restrict the html element to panning only (no pinch-zoom), and pin body to the viewport with overflow hidden so only the shell's own .content area scrolls. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01K3Q361t53QdxgaV8nHSayT --- pwa/index.html | 5 ++++- pwa/src/index.css | 9 +++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/pwa/index.html b/pwa/index.html index a502938..667d7a1 100644 --- a/pwa/index.html +++ b/pwa/index.html @@ -2,7 +2,10 @@ - + Tag Notes diff --git a/pwa/src/index.css b/pwa/src/index.css index cef460c..4da9560 100644 --- 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%; } From 23d3633406f7b8557bf501c6c0b446172c5097ef Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 27 Jun 2026 21:27:27 +0000 Subject: [PATCH 2/4] Fix sticky NavBar on Food page being overlapped by scrolled content The .container scrolled and held padding directly, so the sticky NavBar wasn't flush with the scrollport edge and scrolled content could render above it. Move the padding into a new .body wrapper around everything below NavBar instead. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01K3Q361t53QdxgaV8nHSayT --- pwa/src/routes/Food.module.css | 7 +- pwa/src/routes/Food.tsx | 238 +++++++++++++++++---------------- 2 files changed, 126 insertions(+), 119 deletions(-) diff --git a/pwa/src/routes/Food.module.css b/pwa/src/routes/Food.module.css index 6789bc2..25f8e15 100644 --- a/pwa/src/routes/Food.module.css +++ b/pwa/src/routes/Food.module.css @@ -2,9 +2,14 @@ display: flex; flex-direction: column; height: 100%; + overflow-y: auto; +} + +.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 index 86ffdd7..87ddd4f 100644 --- a/pwa/src/routes/Food.tsx +++ b/pwa/src/routes/Food.tsx @@ -117,135 +117,137 @@ function Food() { return (
-
-
-
-
{remainingProtein()}g
-
protein left
+
+
+
+
+
{remainingProtein()}g
+
protein left
+
+
+
{remainingCalories()}
+
calories left
+
-
-
{remainingCalories()}
-
calories left
+
+ + {Math.round(totals().protein)}g / {targets().protein}g protein + + + {Math.round(totals().calories)} / {targets().calories} cal + + {Math.round(totals().carbs)}g carbs
-
- - {Math.round(totals().protein)}g / {targets().protein}g protein - - - {Math.round(totals().calories)} / {targets().calories} cal - - {Math.round(totals().carbs)}g carbs -
-
-
void handleSubmit(event)}> - updateField('name', event.currentTarget.value)} - /> -
- updateField('protein', event.currentTarget.value)} - /> - updateField('calories', event.currentTarget.value)} - /> + void handleSubmit(event)}> updateField('carbs', event.currentTarget.value)} + type="text" + class={styles.nameInput} + placeholder="Food name" + value={form().name} + onInput={(event) => updateField('name', event.currentTarget.value)} /> -
-
- updateField('quantity', event.currentTarget.value)} - /> - - - - -
-
- - 0}> -
-
Recent foods
-
- + + + +
+ + + 0}> +
+
Recent foods
+
+ + {(entry) => ( + + )} + +
+
+ + + 0} + fallback={
No food logged today
} + > +
+ {(entry) => ( - +
+ + +
)}
-
- - - 0} - fallback={
No food logged today
} - > -
- - {(entry) => ( -
- - -
- )} - -
- + +
); } From 3598446e8242464a6ecb887f85545cee05467986 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 27 Jun 2026 23:10:21 +0000 Subject: [PATCH 3/4] Fix sticky NavBar rendering transparently over scrolled content iOS Safari has a known compositing bug where sticky elements briefly fail to repaint their own layer during scroll/rubber-band overscroll, letting scrolled-past content show through above the sticky header. Force the NavBar onto its own compositing layer and contain overscroll on the scrollable containers so the bounce doesn't trigger the glitch. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01K3Q361t53QdxgaV8nHSayT --- pwa/src/App.module.css | 1 + pwa/src/components/NavBar.module.css | 2 ++ pwa/src/routes/Food.module.css | 1 + 3 files changed, 4 insertions(+) diff --git a/pwa/src/App.module.css b/pwa/src/App.module.css index 0ef0d63..f35e797 100644 --- 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 index 96835ea..c3da888 100644 --- 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/routes/Food.module.css b/pwa/src/routes/Food.module.css index 25f8e15..7c730d9 100644 --- a/pwa/src/routes/Food.module.css +++ b/pwa/src/routes/Food.module.css @@ -3,6 +3,7 @@ flex-direction: column; height: 100%; overflow-y: auto; + overscroll-behavior: contain; } .body { From b9043493efeff7b119a1805221789aa9541b529a Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Sat, 27 Jun 2026 18:32:06 -0500 Subject: [PATCH 4/4] taskfile --- Taskfile.yml | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 Taskfile.yml diff --git a/Taskfile.yml b/Taskfile.yml new file mode 100644 index 0000000..c5f276e --- /dev/null +++ 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