Make layout full-width on mobile with docked top/bottom bars

Remove max-width constraint and horizontal padding on small screens
so content goes edge-to-edge. Turn navigation and action bar lose
rounded corners on mobile and dock flush to top/bottom edges.
Desktop layout (sm: and up) is unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

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"

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"