From 38336f9869c75e0730e75abf9eaeb38a3af4b01a Mon Sep 17 00:00:00 2001
From: thepra <thepra@pm.me>
Date: Tue, 6 Oct 2026 22:40:28 +0200
Subject: [PATCH] The page zooms, keeps its height on phones and isn't reloaded
 by a pull

The viewport no longer forbids zooming (maximum-scale=1, user-scalable=no kept text at 10-12px out of reach), and it
covers the screen with the keyboard resizing the content. The app is 100dvh tall instead of 100vh, so its bottom isn't
under a phone browser's bar, and a pull past the top no longer reloads it (overscroll-behavior-y). New Styles/touch.css
holds what a touch screen gets, under (pointer: coarse) only: for now field text at 16px, so iOS doesn't zoom into a
focused field.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
---
 Styles/app.css     |  1 +
 Styles/base.css    |  6 ++++++
 Styles/touch.css   | 14 ++++++++++++++
 wwwroot/index.html |  4 ++--
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 Styles/touch.css

diff --git a/Styles/app.css b/Styles/app.css
index 892256d..ba94b70 100644
--- a/Styles/app.css
+++ b/Styles/app.css
@@ -15,5 +15,6 @@
 
 @import "./theme.css";
 @import "./neo.css";
+@import "./touch.css";
 @import "./base.css";
 @import "./feed.css";
diff --git a/Styles/base.css b/Styles/base.css
index a998602..d691320 100644
--- a/Styles/base.css
+++ b/Styles/base.css
@@ -5,6 +5,12 @@
 		outline: none;
 	}
 
+	/* The page never scrolls itself (the feed and the pages scroll inside), so a pull past its top would only make a phone
+	   reload the app. Only vertically: a sideways overscroll is the trackpad's back gesture. */
+	html, body {
+		overscroll-behavior-y: none;
+	}
+
 	details > summary::-webkit-details-marker {
 		color: var(--color-base-content);
 	}
diff --git a/Styles/touch.css b/Styles/touch.css
new file mode 100644
index 0000000..8289264
--- /dev/null
+++ b/Styles/touch.css
@@ -0,0 +1,14 @@
+/* Touch screens.
+
+   A phone's layout uses the width variants (max-md:, md:) at the call site; how big a thing is to a finger uses the
+   pointer: everything here sits under @media (pointer: coarse), so a mouse matches none of it and desktop keeps
+   daisyUI's sizes. The rules are plain CSS in Tailwind's utilities layer: like neo.css's @utility overrides they beat
+   daisyUI's rules, which sit in sublayers of it, and they set daisyUI's own size variables where it has one. */
+@layer utilities {
+	@media (pointer: coarse) {
+		/* Field text at 16px: iOS zooms into a focused field whose text is smaller, now that zooming is allowed. */
+		:where(.input, .select, .textarea) {
+			--font-size-min: 1rem;
+		}
+	}
+}
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 74dba4b..4354084 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -3,7 +3,7 @@
 
 <head>
 	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
 	<title>Index</title>
 	<base href="/" />
 	<link href="vendor/ionicons.min.css" rel="stylesheet" />
@@ -16,7 +16,7 @@
 </head>
 
 <body>
-	<div id="app" class="block relative h-screen w-full">
+	<div id="app" class="block relative h-dvh w-full">
 		<div class="mx-auto my-auto">Loading...</div>  
 	</div>