Polish UI: consistent icon buttons, tooltips, modal backdrop close, and top bar layout

- Standardize icon button sizing (size="icon") and color (text-muted-foreground) across top and bottom bars
- Group bottom bar icon buttons with gap-0 to match top bar style
- Add missing tooltips/aria-labels for stat block viewer, bulk import buttons
- Replace Settings icon with Library for source manager
- Make step forward/back buttons use primary (solid) variant
- Move round badge next to combatant name in center of top bar
- Close player create/edit and management modals on backdrop click

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/components/__tests__/turn-navigation.test.tsx

@@ -54,11 +54,11 @@ describe("TurnNavigation", () => {
 			expect(container.textContent).not.toContain("—");
 		});
 
-		it("round badge and combatant name are in separate DOM elements", () => {
+		it("round badge and combatant name are siblings in the center area", () => {
 			renderNav();
 			const badge = screen.getByText("R1");
 			const name = screen.getByText("Goblin");
-			expect(badge.parentElement).not.toBe(name.parentElement);
+			expect(badge.parentElement).toBe(name.parentElement);
 		});
 
 		it("updates the round badge when round changes", () => {

apps/web/src/components/action-bar.tsx

@@ -437,83 +437,93 @@ export function ActionBar({
 				<Button type="submit" size="sm">
 					Add
 				</Button>
-				{onManagePlayers && (
+				<div className="flex items-center gap-0">
-					<Button
+					{onManagePlayers && (
-						type="button"
-						size="sm"
-						variant="ghost"
-						onClick={onManagePlayers}
-						title="Player characters"
-					>
-						<Users className="h-4 w-4" />
-					</Button>
-				)}
-				{bestiaryLoaded && onViewStatBlock && (
-					<div ref={viewerRef} className="relative">
 						<Button
 							type="button"
-							size="sm"
+							size="icon"
 							variant="ghost"
-							onClick={() => (viewerOpen ? closeViewer() : openViewer())}
+							className="text-muted-foreground hover:text-hover-neutral"
+							onClick={onManagePlayers}
+							title="Player characters"
+							aria-label="Player characters"
 						>
-							<Eye className="h-4 w-4" />
+							<Users className="h-5 w-5" />
 						</Button>
-						{viewerOpen && (
+					)}
-							<div className="absolute bottom-full right-0 z-50 mb-1 w-64 rounded-md border border-border bg-card shadow-lg">
+					{bestiaryLoaded && onViewStatBlock && (
-								<div className="p-2">
+						<div ref={viewerRef} className="relative">
-									<Input
+							<Button
-										ref={viewerInputRef}
+								type="button"
-										type="text"
+								size="icon"
-										value={viewerQuery}
+								variant="ghost"
-										onChange={(e) => handleViewerQueryChange(e.target.value)}
+								className="text-muted-foreground hover:text-hover-neutral"
-										onKeyDown={handleViewerKeyDown}
+								onClick={() => (viewerOpen ? closeViewer() : openViewer())}
-										placeholder="Search stat blocks..."
+								title="Browse stat blocks"
-										className="w-full"
+								aria-label="Browse stat blocks"
-									/>
+							>
-								</div>
+								<Eye className="h-5 w-5" />
-								{viewerResults.length > 0 && (
+							</Button>
-									<ul className="max-h-48 overflow-y-auto border-t border-border py-1">
+							{viewerOpen && (
-										{viewerResults.map((result, i) => (
+								<div className="absolute bottom-full right-0 z-50 mb-1 w-64 rounded-md border border-border bg-card shadow-lg">
-											<li key={creatureKey(result)}>
+									<div className="p-2">
-												<button
+										<Input
-													type="button"
+											ref={viewerInputRef}
-													className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+											type="text"
-														i === viewerIndex
+											value={viewerQuery}
-															? "bg-accent/20 text-foreground"
+											onChange={(e) => handleViewerQueryChange(e.target.value)}
-															: "text-foreground hover:bg-hover-neutral-bg"
+											onKeyDown={handleViewerKeyDown}
-													}`}
+											placeholder="Search stat blocks..."
-													onClick={() => handleViewerSelect(result)}
+											className="w-full"
-													onMouseEnter={() => setViewerIndex(i)}
+										/>
-												>
-													<span>{result.name}</span>
-													<span className="text-xs text-muted-foreground">
-														{result.sourceDisplayName}
-													</span>
-												</button>
-											</li>
-										))}
-									</ul>
-								)}
-								{viewerQuery.length >= 2 && viewerResults.length === 0 && (
-									<div className="border-t border-border px-3 py-2 text-sm text-muted-foreground">
-										No creatures found
 									</div>
-								)}
+									{viewerResults.length > 0 && (
-							</div>
+										<ul className="max-h-48 overflow-y-auto border-t border-border py-1">
-						)}
+											{viewerResults.map((result, i) => (
-					</div>
+												<li key={creatureKey(result)}>
-				)}
+													<button
-				{bestiaryLoaded && onBulkImport && (
+														type="button"
-					<Button
+														className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
-						type="button"
+															i === viewerIndex
-						size="sm"
+																? "bg-accent/20 text-foreground"
-						variant="ghost"
+																: "text-foreground hover:bg-hover-neutral-bg"
-						onClick={onBulkImport}
+														}`}
-						disabled={bulkImportDisabled}
+														onClick={() => handleViewerSelect(result)}
-					>
+														onMouseEnter={() => setViewerIndex(i)}
-						<Import className="h-4 w-4" />
+													>
-					</Button>
+														<span>{result.name}</span>
-				)}
+														<span className="text-xs text-muted-foreground">
+															{result.sourceDisplayName}
+														</span>
+													</button>
+												</li>
+											))}
+										</ul>
+									)}
+									{viewerQuery.length >= 2 && viewerResults.length === 0 && (
+										<div className="border-t border-border px-3 py-2 text-sm text-muted-foreground">
+											No creatures found
+										</div>
+									)}
+								</div>
+							)}
+						</div>
+					)}
+					{bestiaryLoaded && onBulkImport && (
+						<Button
+							type="button"
+							size="icon"
+							variant="ghost"
+							className="text-muted-foreground hover:text-hover-neutral"
+							onClick={onBulkImport}
+							disabled={bulkImportDisabled}
+							title="Bulk import"
+							aria-label="Bulk import"
+						>
+							<Import className="h-5 w-5" />
+						</Button>
+					)}
+				</div>
 			</form>
 		</div>
 	);

apps/web/src/components/create-player-modal.tsx

@@ -77,8 +77,16 @@ export function CreatePlayerModal({
 	};
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
-			<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			onMouseDown={onClose}
+		>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
+			<div
+				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+				onMouseDown={(e) => e.stopPropagation()}
+			>
 				<div className="mb-4 flex items-center justify-between">
 					<h2 className="text-lg font-semibold text-foreground">
 						{isEdit ? "Edit Player" : "Create Player"}

apps/web/src/components/player-management.tsx

@@ -28,8 +28,16 @@ export function PlayerManagement({
 	if (!open) return null;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
-			<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			onMouseDown={onClose}
+		>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
+			<div
+				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+				onMouseDown={(e) => e.stopPropagation()}
+			>
 				<div className="mb-4 flex items-center justify-between">
 					<h2 className="text-lg font-semibold text-foreground">
 						Player Characters

apps/web/src/components/turn-navigation.tsx

@@ -1,5 +1,5 @@
 import type { Encounter } from "@initiative/domain";
-import { Settings, StepBack, StepForward, Trash2 } from "lucide-react";
+import { Library, StepBack, StepForward, Trash2 } from "lucide-react";
 import { D20Icon } from "./d20-icon";
 import { Button } from "./ui/button";
 import { ConfirmButton } from "./ui/confirm-button";
@@ -27,28 +27,22 @@ export function TurnNavigation({
 
 	return (
 		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
-			<div className="flex flex-shrink-0 items-center gap-3">
+			<Button
-				<Button
+				size="icon"
-					variant="outline"
+				onClick={onRetreatTurn}
-					size="icon"
+				disabled={!hasCombatants || isAtStart}
-					className="h-8 w-8 text-foreground border-foreground hover:text-hover-action hover:border-hover-action hover:bg-transparent"
+				title="Previous turn"
-					onClick={onRetreatTurn}
+				aria-label="Previous turn"
-					disabled={!hasCombatants || isAtStart}
+			>
-					title="Previous turn"
+				<StepBack className="h-5 w-5" />
-					aria-label="Previous turn"
+			</Button>
-				>
+
-					<StepBack className="h-5 w-5" />
+			<div className="min-w-0 flex-1 flex items-center justify-center gap-2 text-sm">
-				</Button>
+				<span className="rounded-full bg-muted text-foreground text-sm px-2 py-0.5 font-semibold shrink-0">
-				<span className="rounded-full bg-muted text-foreground text-sm px-2 py-0.5 font-semibold">
 					R{encounter.roundNumber}
 				</span>
-			</div>
-
-			<div className="min-w-0 flex-1 text-center text-sm">
 				{activeCombatant ? (
-					<span className="truncate block font-medium">
+					<span className="truncate font-medium">{activeCombatant.name}</span>
-						{activeCombatant.name}
-					</span>
 				) : (
 					<span className="text-muted-foreground">No combatants</span>
 				)}
@@ -59,7 +53,7 @@ export function TurnNavigation({
 					<Button
 						variant="ghost"
 						size="icon"
-						className="h-8 w-8 text-muted-foreground hover:text-hover-action"
+						className="text-muted-foreground hover:text-hover-action"
 						onClick={onRollAllInitiative}
 						title="Roll all initiative"
 						aria-label="Roll all initiative"
@@ -69,25 +63,23 @@ export function TurnNavigation({
 					<Button
 						variant="ghost"
 						size="icon"
-						className="h-8 w-8 text-muted-foreground hover:text-hover-neutral"
+						className="text-muted-foreground hover:text-hover-neutral"
 						onClick={onOpenSourceManager}
 						title="Manage cached sources"
 						aria-label="Manage cached sources"
 					>
-						<Settings className="h-5 w-5" />
+						<Library className="h-5 w-5" />
 					</Button>
 					<ConfirmButton
 						icon={<Trash2 className="h-5 w-5" />}
 						label="Clear encounter"
 						onConfirm={onClearEncounter}
 						disabled={!hasCombatants}
-						className="h-8 w-8 text-muted-foreground"
+						className="text-muted-foreground"
 					/>
 				</div>
 				<Button
-					variant="outline"
 					size="icon"
-					className="h-8 w-8 text-foreground border-foreground hover:text-hover-action hover:border-hover-action hover:bg-transparent"
 					onClick={onAdvanceTurn}
 					disabled={!hasCombatants}
 					title="Next turn"