diff --git a/apps/web/index.html b/apps/web/index.html
index 3d2b83f..b156749 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 		<meta name="theme-color" content="#0e1a2e" />
 		<link rel="manifest" href="/manifest.json" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index cb63b5a..1ad84a3 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -46,7 +46,10 @@ export function App() {
 			<div className="relative mx-auto flex min-h-0 w-full flex-1 flex-col gap-3 sm:max-w-2xl sm:px-4">
 				{!!actionBarAnim.showTopBar && (
 					<div
-						className={cn("shrink-0 sm:pt-8", actionBarAnim.topBarClass)}
+						className={cn(
+							"shrink-0 pt-[env(safe-area-inset-top)] sm:pt-[max(env(safe-area-inset-top),2rem)]",
+							actionBarAnim.topBarClass,
+						)}
 						onAnimationEnd={actionBarAnim.onTopBarExitEnd}
 					>
 						<TurnNavigation />
@@ -85,7 +88,10 @@ export function App() {
 						</div>
 
 						<div
-							className={cn("shrink-0 sm:pb-8", actionBarAnim.settlingClass)}
+							className={cn(
+								"shrink-0 pb-[env(safe-area-inset-bottom)] sm:pb-[max(env(safe-area-inset-bottom),2rem)]",
+								actionBarAnim.settlingClass,
+							)}
 							onAnimationEnd={actionBarAnim.onSettleEnd}
 						>
 							<ActionBar
diff --git a/apps/web/src/components/action-bar.tsx b/apps/web/src/components/action-bar.tsx
index c0ff61f..7ea2beb 100644
--- a/apps/web/src/components/action-bar.tsx
+++ b/apps/web/src/components/action-bar.tsx
@@ -279,7 +279,8 @@ export function ActionBar({
 	const handleAddFromBestiary = useCallback(
 		(result: SearchResult) => {
 			const creatureId = addFromBestiary(result);
-			if (creatureId && panelView.mode === "closed") {
+			const isDesktop = globalThis.matchMedia("(min-width: 1024px)").matches;
+			if (creatureId && panelView.mode === "closed" && isDesktop) {
 				showCreature(creatureId);
 			}
 		},
@@ -521,7 +522,7 @@ export function ActionBar({
 		<div className="card-glow flex items-center gap-3 border-border border-t bg-card px-4 py-3 sm:rounded-lg sm:border">
 			<form
 				onSubmit={handleAdd}
-				className="relative flex flex-1 items-center gap-2"
+				className="relative flex flex-1 flex-wrap items-center gap-2 sm:flex-nowrap"
 			>
 				<div className="flex-1">
 					<div className="relative max-w-xs">
diff --git a/apps/web/src/components/combatant-row.tsx b/apps/web/src/components/combatant-row.tsx
index 519b31f..c627e8d 100644
--- a/apps/web/src/components/combatant-row.tsx
+++ b/apps/web/src/components/combatant-row.tsx
@@ -157,7 +157,7 @@ function MaxHpDisplay({
 				inputMode="numeric"
 				value={draft}
 				placeholder="Max"
-				className="h-7 w-[7ch] text-center text-sm tabular-nums"
+				className="h-7 w-[7ch] text-center tabular-nums"
 				onChange={(e) => setDraft(e.target.value)}
 				onBlur={commit}
 				onKeyDown={(e) => {
@@ -272,7 +272,7 @@ function AcDisplay({
 				inputMode="numeric"
 				value={draft}
 				placeholder="AC"
-				className="h-7 w-[6ch] text-center text-sm tabular-nums"
+				className="h-7 w-[6ch] text-center tabular-nums"
 				onChange={(e) => setDraft(e.target.value)}
 				onBlur={commit}
 				onKeyDown={(e) => {
@@ -348,7 +348,7 @@ function InitiativeDisplay({
 				value={draft}
 				placeholder="--"
 				className={cn(
-					"h-7 w-full text-center text-sm tabular-nums",
+					"h-7 w-full text-center tabular-nums",
 					dimmed && "opacity-50",
 				)}
 				onChange={(e) => setDraft(e.target.value)}
@@ -520,7 +520,7 @@ export function CombatantRow({
 				isPulsing && "animate-concentration-pulse",
 			)}
 		>
-			<div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-2 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3">
+			<div className="grid grid-cols-[2rem_3rem_auto_1fr_auto_2rem] items-center gap-1.5 py-3 sm:grid-cols-[2rem_3.5rem_auto_1fr_auto_2rem] sm:gap-3 sm:py-2">
 				{/* Concentration */}
 				<button
 					type="button"
diff --git a/apps/web/src/components/hp-adjust-popover.tsx b/apps/web/src/components/hp-adjust-popover.tsx
index 3bcdcbf..2309a40 100644
--- a/apps/web/src/components/hp-adjust-popover.tsx
+++ b/apps/web/src/components/hp-adjust-popover.tsx
@@ -106,7 +106,7 @@ export function HpAdjustPopover({
 					inputMode="numeric"
 					value={inputValue}
 					placeholder="HP"
-					className="h-7 w-[7ch] text-center text-sm tabular-nums"
+					className="h-7 w-[7ch] text-center tabular-nums"
 					onChange={(e) => {
 						const v = e.target.value;
 						if (v === "" || DIGITS_ONLY_REGEX.test(v)) {
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 5eb8eb1..566969c 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -12,7 +12,7 @@ export const Input = ({
 		<input
 			ref={ref}
 			className={cn(
-				"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-foreground text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
 				className,
 			)}
 			{...props}
diff --git a/apps/web/src/hooks/use-auto-stat-block.ts b/apps/web/src/hooks/use-auto-stat-block.ts
index c5ab110..d1b4abe 100644
--- a/apps/web/src/hooks/use-auto-stat-block.ts
+++ b/apps/web/src/hooks/use-auto-stat-block.ts
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useEncounterContext } from "../contexts/encounter-context.js";
 import { useSidePanelContext } from "../contexts/side-panel-context.js";
 
@@ -8,10 +8,20 @@ export function useAutoStatBlock(): void {
 
 	const activeCreatureId =
 		encounter.combatants[encounter.activeIndex]?.creatureId;
+	const prevActiveIndexRef = useRef(encounter.activeIndex);
 
 	useEffect(() => {
-		if (activeCreatureId && panelView.mode === "creature") {
+		const prevIndex = prevActiveIndexRef.current;
+		prevActiveIndexRef.current = encounter.activeIndex;
+
+		// Only auto-update when the active turn changes (advance/retreat),
+		// not when the panel mode changes (user clicking a different creature).
+		if (
+			encounter.activeIndex !== prevIndex &&
+			activeCreatureId &&
+			panelView.mode === "creature"
+		) {
 			updateCreature(activeCreatureId);
 		}
-	}, [activeCreatureId, panelView.mode, updateCreature]);
+	}, [encounter.activeIndex, activeCreatureId, panelView.mode, updateCreature]);
 }
