diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 8e3c87c..cb63b5a 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -43,10 +43,10 @@ export function App() {
 
 	return (
 		<div className="flex h-dvh flex-col">
-			<div className="relative mx-auto flex min-h-0 w-full max-w-2xl flex-1 flex-col gap-3 px-4">
+			<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 pt-8", actionBarAnim.topBarClass)}
+						className={cn("shrink-0 sm:pt-8", actionBarAnim.topBarClass)}
 						onAnimationEnd={actionBarAnim.onTopBarExitEnd}
 					>
 						<TurnNavigation />
@@ -85,7 +85,7 @@ export function App() {
 						</div>
 
 						<div
-							className={cn("shrink-0 pb-8", actionBarAnim.settlingClass)}
+							className={cn("shrink-0 sm:pb-8", 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 f033464..c0ff61f 100644
--- a/apps/web/src/components/action-bar.tsx
+++ b/apps/web/src/components/action-bar.tsx
@@ -518,7 +518,7 @@ export function ActionBar({
 	});
 
 	return (
-		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
+		<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"
diff --git a/apps/web/src/components/turn-navigation.tsx b/apps/web/src/components/turn-navigation.tsx
index ec544b1..1b67eff 100644
--- a/apps/web/src/components/turn-navigation.tsx
+++ b/apps/web/src/components/turn-navigation.tsx
@@ -12,7 +12,7 @@ export function TurnNavigation() {
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
 
 	return (
-		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 border-border border-b bg-card px-4 py-3 sm:rounded-lg sm:border">
 			<Button
 				variant="ghost"
 				size="icon"