Implement the 022-fixed-layout-bars feature that pins turn navigation to the top and add-creature bar to the bottom of the encounter tracker with only the combatant list scrolling between them, and auto-scrolls to the active combatant on turn change

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

apps/web/src/components/combatant-row.tsx

@@ -4,7 +4,7 @@ import {
 	deriveHpStatus,
 } from "@initiative/domain";
 import { BookOpen, Brain, Shield, X } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { type Ref, useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "../lib/utils";
 import { ConditionPicker } from "./condition-picker";
 import { ConditionTags } from "./condition-tags";
@@ -267,6 +267,7 @@ function AcDisplay({
 }
 
 export function CombatantRow({
+	ref,
 	combatant,
 	isActive,
 	onRename,
@@ -278,7 +279,7 @@ export function CombatantRow({
 	onToggleCondition,
 	onToggleConcentration,
 	onShowStatBlock,
-}: CombatantRowProps) {
+}: CombatantRowProps & { ref?: Ref<HTMLDivElement> }) {
 	const { id, name, initiative, maxHp, currentHp } = combatant;
 	const status = deriveHpStatus(currentHp, maxHp);
 	const dimmed = status === "unconscious";
@@ -313,6 +314,7 @@ export function CombatantRow({
 
 	return (
 		<div
+			ref={ref}
 			className={cn(
 				"group rounded-md px-3 py-2 transition-colors",
 				isActive