Fix condition picker clipping out of viewport

Render condition picker via React portal with fixed positioning so it
is no longer clipped by the overflow-y-auto combatant list container.

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

apps/web/src/components/__tests__/condition-picker.test.tsx

@@ -4,6 +4,7 @@ import "@testing-library/jest-dom/vitest";
 import { CONDITION_DEFINITIONS, type ConditionId } from "@initiative/domain";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { createRef, type RefObject } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { ConditionPicker } from "../condition-picker";
 
@@ -18,8 +19,13 @@ function renderPicker(
 ) {
 	const onToggle = overrides.onToggle ?? vi.fn();
 	const onClose = overrides.onClose ?? vi.fn();
+	const anchorRef = createRef<HTMLElement>() as RefObject<HTMLElement>;
+	const anchor = document.createElement("div");
+	document.body.appendChild(anchor);
+	(anchorRef as { current: HTMLElement }).current = anchor;
 	const result = render(
 		<ConditionPicker
+			anchorRef={anchorRef}
 			activeConditions={overrides.activeConditions ?? []}
 			onToggle={onToggle}
 			onClose={onClose}

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

@@ -6,7 +6,7 @@ import {
 	type PlayerIcon,
 	type RollMode,
 } from "@initiative/domain";
-import { Book, BookOpen, Brain, X } from "lucide-react";
+import { Brain, Pencil, X } from "lucide-react";
 import { type Ref, useCallback, useEffect, useRef, useState } from "react";
 import { useEncounterContext } from "../contexts/encounter-context.js";
 import { useInitiativeRollsContext } from "../contexts/initiative-rolls-context.js";
@@ -47,11 +47,13 @@ function EditableName({
 	combatantId,
 	onRename,
 	color,
+	onToggleStatBlock,
 }: Readonly<{
 	name: string;
 	combatantId: CombatantId;
 	onRename: (id: CombatantId, newName: string) => void;
 	color?: string;
+	onToggleStatBlock?: () => void;
 }>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(name);
@@ -89,14 +91,31 @@ function EditableName({
 	}
 
 	return (
-		<button
+		<>
-			type="button"
+			<button
-			onClick={startEditing}
+				type="button"
-			className="cursor-text truncate text-left text-foreground text-sm transition-colors hover:text-hover-neutral"
+				onClick={onToggleStatBlock}
-			style={color ? { color } : undefined}
+				disabled={!onToggleStatBlock}
-		>
+				className={cn(
-			{name}
+					"truncate text-left text-sm transition-colors",
-		</button>
+					onToggleStatBlock
+						? "cursor-pointer text-foreground hover:text-hover-neutral"
+						: "cursor-default text-foreground",
+				)}
+				style={color ? { color } : undefined}
+			>
+				{name}
+			</button>
+			<button
+				type="button"
+				onClick={startEditing}
+				title="Rename"
+				aria-label="Rename"
+				className="inline-flex shrink-0 items-center rounded p-0.5 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-colors transition-opacity hover:bg-hover-neutral-bg hover:text-hover-neutral focus:opacity-100 group-hover:opacity-100"
+			>
+				<Pencil size={14} />
+			</button>
+		</>
 	);
 }
 
@@ -428,14 +447,22 @@ export function CombatantRow({
 		toggleCondition,
 		toggleConcentration,
 	} = useEncounterContext();
-	const { selectedCreatureId, showCreature } = useSidePanelContext();
+	const { selectedCreatureId, showCreature, toggleCollapse } =
+		useSidePanelContext();
 	const { handleRollInitiative } = useInitiativeRollsContext();
 
 	// Derive what was previously conditional props
 	const isStatBlockOpen = combatant.creatureId === selectedCreatureId;
 	const { creatureId } = combatant;
-	const onShowStatBlock = creatureId
+	const hasStatBlock = !!creatureId;
-		? () => showCreature(creatureId)
+	const onToggleStatBlock = hasStatBlock
+		? () => {
+				if (isStatBlockOpen) {
+					toggleCollapse();
+				} else {
+					showCreature(creatureId);
+				}
+			}
 		: undefined;
 	const onRollInitiative = combatant.creatureId
 		? handleRollInitiative
@@ -445,6 +472,7 @@ export function CombatantRow({
 	const status = deriveHpStatus(currentHp, maxHp);
 	const dimmed = status === "unconscious";
 	const [pickerOpen, setPickerOpen] = useState(false);
+	const conditionAnchorRef = useRef<HTMLDivElement>(null);
 
 	const prevHpRef = useRef(currentHp);
 	const [isPulsing, setIsPulsing] = useState(false);
@@ -517,17 +545,6 @@ export function CombatantRow({
 						dimmed && "opacity-50",
 					)}
 				>
-					{!!onShowStatBlock && (
-						<button
-							type="button"
-							onClick={onShowStatBlock}
-							title="View stat block"
-							aria-label="View stat block"
-							className="shrink-0 text-foreground transition-colors hover:text-hover-neutral"
-						>
-							{isStatBlockOpen ? <BookOpen size={16} /> : <Book size={16} />}
-						</button>
-					)}
 					{!!combatant.icon &&
 						!!combatant.color &&
 						(() => {
@@ -549,14 +566,18 @@ export function CombatantRow({
 						combatantId={id}
 						onRename={editCombatant}
 						color={pcColor}
+						onToggleStatBlock={onToggleStatBlock}
 					/>
-					<ConditionTags
+					<div ref={conditionAnchorRef}>
-						conditions={combatant.conditions}
+						<ConditionTags
-						onRemove={(conditionId) => toggleCondition(id, conditionId)}
+							conditions={combatant.conditions}
-						onOpenPicker={() => setPickerOpen((prev) => !prev)}
+							onRemove={(conditionId) => toggleCondition(id, conditionId)}
-					/>
+							onOpenPicker={() => setPickerOpen((prev) => !prev)}
+						/>
+					</div>
 					{!!pickerOpen && (
 						<ConditionPicker
+							anchorRef={conditionAnchorRef}
 							activeConditions={combatant.conditions}
 							onToggle={(conditionId) => toggleCondition(id, conditionId)}
 							onClose={() => setPickerOpen(false)}

apps/web/src/components/condition-picker.tsx

@@ -18,6 +18,7 @@ import {
 	ZapOff,
 } from "lucide-react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { cn } from "../lib/utils";
 
 const ICON_MAP: Record<string, LucideIcon> = {
@@ -52,34 +53,45 @@ const COLOR_CLASSES: Record<string, string> = {
 };
 
 interface ConditionPickerProps {
+	anchorRef: React.RefObject<HTMLElement | null>;
 	activeConditions: readonly ConditionId[] | undefined;
 	onToggle: (conditionId: ConditionId) => void;
 	onClose: () => void;
 }
 
 export function ConditionPicker({
+	anchorRef,
 	activeConditions,
 	onToggle,
 	onClose,
 }: Readonly<ConditionPickerProps>) {
 	const ref = useRef<HTMLDivElement>(null);
-	const [flipped, setFlipped] = useState(false);
+	const [pos, setPos] = useState<{
-	const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
+		top: number;
+		left: number;
+		maxHeight: number;
+	} | null>(null);
 
 	useLayoutEffect(() => {
+		const anchor = anchorRef.current;
 		const el = ref.current;
-		if (!el) return;
+		if (!anchor || !el) return;
-		const rect = el.getBoundingClientRect();
+
-		const spaceBelow = window.innerHeight - rect.top;
+		const anchorRect = anchor.getBoundingClientRect();
-		const spaceAbove = rect.bottom;
+		const menuHeight = el.scrollHeight;
-		const shouldFlip =
+		const pad = 8;
-			rect.bottom > window.innerHeight && spaceAbove > spaceBelow;
+
-		setFlipped(shouldFlip);
+		const spaceBelow = window.innerHeight - anchorRect.bottom - pad;
-		const available = shouldFlip ? spaceAbove : spaceBelow;
+		const spaceAbove = anchorRect.top - pad;
-		if (rect.height > available) {
+		const openBelow = spaceBelow >= menuHeight || spaceBelow >= spaceAbove;
-			setMaxHeight(available - 16);
+
-		}
+		const top = openBelow
-	}, []);
+			? anchorRect.bottom + 4
+			: Math.max(pad, anchorRect.top - Math.min(menuHeight, spaceAbove) - 4);
+		const maxHeight = openBelow ? spaceBelow : Math.min(menuHeight, spaceAbove);
+
+		setPos({ top, left: anchorRect.left, maxHeight });
+	}, [anchorRef]);
 
 	useEffect(() => {
 		function handleClickOutside(e: MouseEvent) {
@@ -93,14 +105,15 @@ export function ConditionPicker({
 
 	const active = new Set(activeConditions ?? []);
 
-	return (
+	return createPortal(
 		<div
 			ref={ref}
-			className={cn(
+			className="card-glow fixed z-50 w-fit overflow-y-auto rounded-lg border border-border bg-background p-1"
-				"card-glow absolute left-0 z-10 w-fit overflow-y-auto rounded-lg border border-border bg-background p-1",
+			style={
-				flipped ? "bottom-full mb-1" : "top-full mt-1",
+				pos
-			)}
+					? { top: pos.top, left: pos.left, maxHeight: pos.maxHeight }
-			style={maxHeight ? { maxHeight } : undefined}
+					: { visibility: "hidden" as const }
+			}
 		>
 			{CONDITION_DEFINITIONS.map((def) => {
 				const Icon = ICON_MAP[def.iconName];
@@ -129,6 +142,7 @@ export function ConditionPicker({
 					</button>
 				);
 			})}
-		</div>
+		</div>,
+		document.body,
 	);
 }