fix incorrect jumping/scaling on mobile

ajgeiss0702 · ajgeiss0702 · commit 52ec7b754986 · 2026-04-15T12:36:35.000-07:00
diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" >
 		<link rel="icon" href="%sveltekit.assets%/wan.webp" >
-		<meta name="viewport" content="width=device-width" >
+		<meta name="viewport" content="width=device-width, initial-scale=1" >
 		<link rel="manifest" href="/site.webmanifest">
 		<link rel="apple-touch-icon" href="/wan-ios-logo.png">
 		<meta name="darkreader-lock">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -136,10 +136,15 @@
 	let addSpace = $state(false);
 	function checkHeight() {
 		if(!browser || !mainContainer) return;
-		if(mainContainer.scrollHeight > window.innerHeight-50) {
+		// Use hysteresis to prevent oscillation when window.innerHeight fluctuates
+		// due to mobile browser chrome showing/hiding. The spacer is outside
+		// mainContainer so it doesn't affect scrollHeight, but we still need
+		// different thresholds to avoid toggling on small viewport changes.
+		const threshold = addSpace ? 100 : 50;
+		if(mainContainer.scrollHeight > window.innerHeight - threshold) {
 			outerContainer.classList.remove("items-center")
 			outerContainer.classList.add("too-short")
-			addSpace = true // So that there is some space at the bottom when scrolling. for some stupid reason padding doesnt work here
+			addSpace = true
 			if(dev) console.debug("too short")
 		} else {
 			outerContainer.classList.add("items-center")
@@ -406,10 +411,10 @@
 				</Accordion>
 			</div>
 		{/if}
-		{#if addSpace}
-			<div class="h-16"></div>
-		{/if}
 	</div>
+	{#if addSpace}
+		<div class="h-16"></div>
+	{/if}
 </div>
 
 {#if isFrame}
@@ -477,7 +482,6 @@
 
 	.container {
 		padding: 5em 1em 1em;
-		transition: padding 0.4s;
 	}
 
 	.lateness-stats {
