diff --git a/AGENTS.md b/AGENTS.md
index d2fbfc905..7da32d029 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -405,3 +405,13 @@ is also an scp-style git remote, and `redactErrorText` deliberately keeps the ho
 None of that helps anywhere else. Every third-party pixel we load reads the page URL, so those
 addresses also reach HubSpot, Meta, LinkedIn and GA — `beforeSend` cannot touch what they send.
 Carry the value in router state or `sessionStorage`, and key routes by an opaque id.
+
+## Tailwind — `--spacing(N)` in an arbitrary value is a function, not a variable
+
+`h-[calc(100vh-(--spacing(32)))]` (used by the databases, log, and API-explorer sidebars) is valid
+Tailwind v4: `--spacing(N)` is the framework's spacing **function**, compiled to
+`calc(var(--spacing) * N)` = 8rem here. It is **not** `var(--spacing-32)` — the default theme defines
+only the base `--spacing: 0.25rem`, so a `var(--spacing-32)` "fix" resolves to nothing and collapses
+the `calc()` (the container height drops to `auto`). Multiple code-review models flag the function form
+as invalid CSS and suggest the `var()` form; don't take the bait. Verify by measuring, not by reading:
+the container computes to exactly `innerHeight − 128px` when the function resolved.
diff --git a/src/features/instance/apis/APIDocs.tsx b/src/features/instance/apis/APIDocs.tsx
index ca24c3fb8..a4e38bb7b 100644
--- a/src/features/instance/apis/APIDocs.tsx
+++ b/src/features/instance/apis/APIDocs.tsx
@@ -96,11 +96,15 @@ export function APIDocs() {
 	}
 
 	return (
-		<div className="px-4 pt-6 pb-12 md:px-8">
+		// On lg, a fixed-height app-shell: the container fills from below the layout chrome
+		// (`--spacing(32)` = the layout's `mt-32`) to the viewport bottom, so the explorer's sidebar
+		// and detail scroll internally and the sidebar reaches the bottom exactly. On smaller screens
+		// it's a normal block that the page scrolls.
+		<div className="flex flex-col px-4 pt-6 pb-12 md:px-8 lg:h-[calc(100vh-(--spacing(32)))] lg:pb-0">
 			{apiInaccessibleWarning && (
 				<ErrorComponent
 					title="CORS Disabled: HTTP API Not Accessible"
-					className="mt-0 mb-6 border-yellow text-yellow"
+					className="mt-0 mb-6 shrink-0 border-yellow text-yellow"
 					error={{ message: apiInaccessibleWarning }}
 					showReturnToHome={false}
 				>
diff --git a/src/features/instance/apis/explorer/ApiExplorer.test.tsx b/src/features/instance/apis/explorer/ApiExplorer.test.tsx
index 3decbf70c..eec3c98c9 100644
--- a/src/features/instance/apis/explorer/ApiExplorer.test.tsx
+++ b/src/features/instance/apis/explorer/ApiExplorer.test.tsx
@@ -66,6 +66,16 @@ describe('ApiExplorer', () => {
 		expect(screen.getByText('Request body')).toBeTruthy();
 	});
 
+	it('renders a resize separator wired to the persisted sidebar width', () => {
+		const { container } = renderExplorer();
+		const separator = screen.getByRole('separator', { name: 'Resize sidebar' });
+		expect(separator.getAttribute('aria-valuenow')).toBe('320');
+		expect(separator.getAttribute('aria-valuemin')).toBe('240');
+		expect(separator.getAttribute('aria-valuemax')).toBe('512'); // half of jsdom's 1024 innerWidth
+		const aside = container.querySelector('aside');
+		expect(aside?.style.getPropertyValue('--api-sidebar-width')).toBe('320px');
+	});
+
 	it('binds a path-parameter input into the built request URL', () => {
 		renderExplorer();
 		// The single POST is unambiguous; its Monaco body editor is mocked out above, so this
diff --git a/src/features/instance/apis/explorer/ApiExplorer.tsx b/src/features/instance/apis/explorer/ApiExplorer.tsx
index f3280eb24..504fb3300 100644
--- a/src/features/instance/apis/explorer/ApiExplorer.tsx
+++ b/src/features/instance/apis/explorer/ApiExplorer.tsx
@@ -11,8 +11,14 @@ import {
 	operationMatchesFilter,
 } from '@/features/instance/apis/explorer/spec';
 import { OpenApiSpec } from '@/features/instance/apis/explorer/types';
+import {
+	maxSidebarWidth,
+	MIN_SIDEBAR_WIDTH,
+	useResizableSidebar,
+} from '@/features/instance/apis/explorer/useResizableSidebar';
 import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';
-import { useEffect, useMemo, useState } from 'react';
+import { cn } from '@/lib/cn';
+import { type CSSProperties, useEffect, useMemo, useState } from 'react';
 
 /**
  * The custom Harper API explorer: a hierarchical, searchable list of the spec's operations alongside
@@ -56,6 +62,10 @@ export function ApiExplorer(
 		?? baseURL;
 	const [copyServer] = useCopyToClipboard(activeServer ?? '');
 
+	// Width drives a CSS variable applied only at lg+; below that the sidebar stacks full-width.
+	const { width: sidebarWidth, isResizing, startResizing, handleKeyDown } = useResizableSidebar();
+	const sidebarWidthVar = { '--api-sidebar-width': `${sidebarWidth}px` } as CSSProperties;
+
 	const filteredOperations = useMemo(
 		() => allOperations.filter(op => operationMatchesFilter(op, filter)),
 		[allOperations, filter],
@@ -70,8 +80,11 @@ export function ApiExplorer(
 	}
 
 	return (
-		<div className="flex flex-col gap-5">
-			<header className="flex min-w-0 flex-col">
+		// On lg this is a fixed-height app-shell (its parent sets the height): the header takes its
+		// natural space and the two-pane row fills the rest, so the sidebar reaches the viewport bottom
+		// exactly and the panes scroll internally instead of the page — no page-plus-tree double scroll.
+		<div className="flex flex-col gap-5 lg:min-h-0 lg:flex-1">
+			<header className="flex min-w-0 flex-col lg:shrink-0">
 				<div className="flex items-center gap-2">
 					<h1 className="font-radioGrotesk truncate text-2xl">{spec?.info?.title ?? 'API Explorer'}</h1>
 					{spec?.info?.version && <Badge variant="secondary">v{spec.info.version}</Badge>}
@@ -86,30 +99,55 @@ export function ApiExplorer(
 					</div>
 				)
 				: (
-					<div className="flex flex-col gap-6 lg:flex-row lg:items-start">
-						<aside className="lg:sticky lg:top-4 w-full shrink-0 lg:w-80">
+					<div className="flex flex-col gap-6 lg:min-h-0 lg:flex-1 lg:flex-row lg:items-stretch">
+						<aside
+							style={sidebarWidthVar}
+							// overflow-y-clip (not -hidden) so a broken min-h-0 chain can't paint the tree over the
+							// detail pane, while the resize handle still extends horizontally into the gap.
+							className="relative w-full shrink-0 overflow-y-clip lg:h-full lg:min-h-0 lg:w-[var(--api-sidebar-width)]"
+						>
+							<EndpointList
+								tree={filteredTree}
+								totalCount={allOperations.length}
+								filteredCount={filteredOperations.length}
+								isFiltering={filter.trim() !== ''}
+								selectedId={view === 'operation' ? selectedOp?.id : undefined}
+								onSelect={selectOperation}
+								filter={filter}
+								onFilterChange={setFilter}
+								authType={auth.type}
+								settingsActive={view === 'settings'}
+								onOpenSettings={() => setView('settings')}
+							/>
 							{
-								/* Definite height (not max-height) so EndpointList's `h-full` resolves and its inner
-							    tree actually scrolls instead of spilling past the cap on a large spec. */
+								/* Drag (or focus + Arrow keys) to resize the sidebar — lg+ only; below that it stacks
+								   full-width. The grab zone straddles the aside's right edge into the inter-pane gap so
+								   it doesn't fight the tree's scrollbar; only the thin centered line shows (on
+								   hover / drag / focus). */
 							}
-							<div className="h-[28rem] lg:h-[calc(100vh-11rem)]">
-								<EndpointList
-									tree={filteredTree}
-									totalCount={allOperations.length}
-									filteredCount={filteredOperations.length}
-									isFiltering={filter.trim() !== ''}
-									selectedId={view === 'operation' ? selectedOp?.id : undefined}
-									onSelect={selectOperation}
-									filter={filter}
-									onFilterChange={setFilter}
-									authType={auth.type}
-									settingsActive={view === 'settings'}
-									onOpenSettings={() => setView('settings')}
+							<div
+								role="separator"
+								tabIndex={0}
+								aria-orientation="vertical"
+								aria-label="Resize sidebar"
+								aria-valuenow={sidebarWidth}
+								aria-valuemin={MIN_SIDEBAR_WIDTH}
+								aria-valuemax={maxSidebarWidth(window.innerWidth)}
+								onMouseDown={startResizing}
+								onKeyDown={handleKeyDown}
+								className="group absolute top-0 right-0 bottom-0 z-40 hidden w-4 translate-x-1/2 cursor-col-resize outline-none lg:block"
+							>
+								<div
+									className={cn(
+										'absolute inset-y-0 left-1/2 w-1 -translate-x-1/2 transition-colors',
+										'group-hover:bg-violet-400/60 dark:group-hover:bg-violet-500/60 group-focus-visible:bg-violet-500/80',
+										isResizing && 'bg-violet-400/60 dark:bg-violet-500/60',
+									)}
 								/>
 							</div>
 						</aside>
 
-						<main className="min-w-0 flex-1">
+						<main className="min-w-0 flex-1 lg:min-h-0 lg:overflow-y-auto lg:overscroll-contain lg:pb-6">
 							{view === 'settings'
 								? (
 									<SettingsPanel
diff --git a/src/features/instance/apis/explorer/EndpointList.tsx b/src/features/instance/apis/explorer/EndpointList.tsx
index 30e5031f7..1ab3acfd8 100644
--- a/src/features/instance/apis/explorer/EndpointList.tsx
+++ b/src/features/instance/apis/explorer/EndpointList.tsx
@@ -60,13 +60,16 @@ export function EndpointList({
 	const usingHeaderAuth = authType === 'basic' || authType === 'bearer';
 
 	return (
-		<div className="flex h-full flex-col gap-3">
+		// On lg the parent (`ApiExplorer`) is a fixed-height app-shell, so the sidebar fills it
+		// (`h-full`) and the tree scrolls internally via `flex-1 min-h-0`. On small screens it stacks
+		// above the detail and the page scrolls, so a `max-h` keeps it from dominating the viewport.
+		<div className="flex max-h-[28rem] flex-col gap-3 lg:h-full lg:max-h-none lg:min-h-0">
 			<button
 				type="button"
 				onClick={onOpenSettings}
 				aria-pressed={settingsActive}
 				className={cn(
-					'flex w-full items-center gap-2 rounded-md border px-2.5 py-2 text-left text-sm transition-colors',
+					'flex w-full shrink-0 items-center gap-2 rounded-md border px-2.5 py-2 text-left text-sm transition-colors',
 					settingsActive
 						? 'border-primary bg-primary/10 text-foreground'
 						: 'border-border hover:bg-accent/60',
@@ -79,7 +82,7 @@ export function EndpointList({
 				<span className="text-muted-foreground text-xs">{AUTH_TYPE_LABEL[authType]}</span>
 			</button>
 
-			<div className="relative">
+			<div className="relative shrink-0">
 				<Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2" />
 				<Input
 					value={filter}
@@ -90,7 +93,7 @@ export function EndpointList({
 				/>
 			</div>
 
-			<div className="flex-1 overflow-y-auto pr-1">
+			<div className="flex-1 overflow-y-auto overscroll-contain min-h-0 pr-1">
 				{filteredCount === 0
 					? (
 						<p className="text-muted-foreground px-1 py-6 text-center text-sm">
diff --git a/src/features/instance/apis/explorer/useResizableSidebar.test.ts b/src/features/instance/apis/explorer/useResizableSidebar.test.ts
new file mode 100644
index 000000000..252978afd
--- /dev/null
+++ b/src/features/instance/apis/explorer/useResizableSidebar.test.ts
@@ -0,0 +1,96 @@
+/** @vitest-environment jsdom */
+import { act, renderHook } from '@testing-library/react';
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+	clampWidth,
+	DEFAULT_SIDEBAR_WIDTH,
+	maxSidebarWidth,
+	MIN_SIDEBAR_WIDTH,
+	useResizableSidebar,
+} from './useResizableSidebar';
+
+function setViewportWidth(width: number) {
+	(window as unknown as { innerWidth: number }).innerWidth = width;
+}
+
+afterEach(() => {
+	localStorage.clear();
+	setViewportWidth(1024); // jsdom default
+});
+
+describe('clampWidth', () => {
+	it('raises a too-small width up to the minimum', () => {
+		expect(clampWidth(50, 1024)).toBe(MIN_SIDEBAR_WIDTH);
+	});
+	it('caps a too-large width at half the viewport', () => {
+		expect(clampWidth(9999, 1000)).toBe(500);
+	});
+	it('passes a mid-range width through, rounded', () => {
+		expect(clampWidth(321.6, 1024)).toBe(322);
+	});
+	it('never lets the max fall below the minimum on a tiny viewport', () => {
+		expect(maxSidebarWidth(100)).toBe(MIN_SIDEBAR_WIDTH);
+		expect(clampWidth(10, 100)).toBe(MIN_SIDEBAR_WIDTH);
+	});
+	it('falls back to the default for non-finite input instead of returning NaN', () => {
+		// A corrupted/legacy localStorage value (object, array, string) would otherwise poison the CSS
+		// variable with `NaNpx` and collapse the sidebar to 0.
+		expect(clampWidth(Number.NaN, 1024)).toBe(DEFAULT_SIDEBAR_WIDTH);
+		expect(clampWidth(Number('nope'), 1024)).toBe(DEFAULT_SIDEBAR_WIDTH);
+		expect(clampWidth(Infinity, 1024)).toBe(DEFAULT_SIDEBAR_WIDTH);
+	});
+});
+
+describe('useResizableSidebar', () => {
+	it('sizes the rendered width from the drag delta and persists it on release', () => {
+		const { result } = renderHook(() => useResizableSidebar());
+		expect(result.current.width).toBe(DEFAULT_SIDEBAR_WIDTH);
+
+		act(() => {
+			result.current.startResizing({ clientX: 300, preventDefault() {} } as unknown as ReactMouseEvent);
+		});
+		act(() => {
+			window.dispatchEvent(new MouseEvent('mousemove', { clientX: 400 }));
+		});
+		expect(result.current.width).toBe(DEFAULT_SIDEBAR_WIDTH + 100);
+
+		act(() => {
+			window.dispatchEvent(new MouseEvent('mouseup'));
+		});
+		// Persisted preference survives a remount.
+		const { result: remounted } = renderHook(() => useResizableSidebar());
+		expect(remounted.current.width).toBe(DEFAULT_SIDEBAR_WIDTH + 100);
+	});
+
+	it('re-clamps the rendered width on viewport resize without clobbering the saved preference', () => {
+		const { result } = renderHook(() => useResizableSidebar());
+		expect(result.current.width).toBe(320);
+
+		// Shrink the window so 320 no longer fits (half of 500 is 250).
+		act(() => {
+			setViewportWidth(500);
+			window.dispatchEvent(new Event('resize'));
+		});
+		expect(result.current.width).toBe(250);
+
+		// Grow it back: the preferred 320 is restored (proving resize never overwrote it).
+		act(() => {
+			setViewportWidth(1024);
+			window.dispatchEvent(new Event('resize'));
+		});
+		expect(result.current.width).toBe(320);
+	});
+
+	it('nudges the width in 10px steps with Arrow keys', () => {
+		const { result } = renderHook(() => useResizableSidebar());
+		act(() => {
+			result.current.handleKeyDown({ key: 'ArrowRight', preventDefault() {} } as unknown as ReactKeyboardEvent);
+		});
+		expect(result.current.width).toBe(330);
+		act(() => {
+			result.current.handleKeyDown({ key: 'ArrowLeft', preventDefault() {} } as unknown as ReactKeyboardEvent);
+		});
+		expect(result.current.width).toBe(320);
+	});
+});
diff --git a/src/features/instance/apis/explorer/useResizableSidebar.ts b/src/features/instance/apis/explorer/useResizableSidebar.ts
new file mode 100644
index 000000000..027f81bc0
--- /dev/null
+++ b/src/features/instance/apis/explorer/useResizableSidebar.ts
@@ -0,0 +1,120 @@
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { LocalStorageKeys } from '@/lib/storage/localStorageKeys';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/** Matches the previous fixed `lg:w-80` (320px), so first load looks unchanged. */
+export const DEFAULT_SIDEBAR_WIDTH = 320;
+/**
+ * Narrowest the sidebar may be dragged. A touch wider than the databases sidebar's 200px because the
+ * endpoint tree nests deeper (resource → path → method, each level indented), so labels need the room.
+ */
+export const MIN_SIDEBAR_WIDTH = 240;
+/** Width nudge per Arrow key press when the separator is focused. */
+const KEYBOARD_STEP = 10;
+
+/** Widest the sidebar may be — half the viewport, so the detail pane keeps the larger share. */
+export function maxSidebarWidth(viewportWidth: number): number {
+	return Math.max(MIN_SIDEBAR_WIDTH, Math.floor(viewportWidth / 2));
+}
+
+/** Clamp to a usable range: never below the minimum, never past half the viewport. */
+export function clampWidth(width: number, viewportWidth: number): number {
+	// A corrupted/legacy value under this key (safeParse returns any valid JSON, so an object, array, or
+	// string reaches us here) would make the arithmetic NaN and render `--api-sidebar-width: NaNpx`,
+	// silently collapsing the sidebar to 0. Fall back to the default rather than propagate NaN.
+	const usable = Number.isFinite(width) ? width : DEFAULT_SIDEBAR_WIDTH;
+	return Math.round(Math.min(Math.max(usable, MIN_SIDEBAR_WIDTH), maxSidebarWidth(viewportWidth)));
+}
+
+/**
+ * Drag-to-resize state for the API explorer's endpoint sidebar. Mirrors the databases sidebar
+ * (see `databases/hooks/useResizableDatabasesSidebar.ts`): mousedown arms the gesture, then window
+ * `mousemove`/`mouseup` listeners track it so the cursor can leave the handle. Like that sidebar (and
+ * unlike the applications file tray, which is anchored at the viewport's left edge so its width is just
+ * the cursor X), this one sits in-flow with page padding to its left, so we track the delta from where
+ * the drag started.
+ *
+ * Width updates once per render during the drag and commits to local storage once on release — writing
+ * localStorage on every `mousemove` would stutter. The width is a global UI preference, not per-entity:
+ * unlike the server/auth settings it carries no credential, so it's fine to share across instances.
+ */
+export function useResizableSidebar() {
+	const [persistedWidth, setPersistedWidth] = useLocalStorage(
+		LocalStorageKeys.ApiExplorerSidebarWidth,
+		DEFAULT_SIDEBAR_WIDTH,
+	);
+	const [isResizing, setIsResizing] = useState(false);
+	const [width, setWidth] = useState(() => clampWidth(persistedWidth, window.innerWidth));
+	const widthRef = useRef(width);
+	widthRef.current = width;
+	// The cursor X and sidebar width captured at mousedown, so mousemove can size from the delta.
+	const gestureRef = useRef<{ startX: number; startWidth: number } | null>(null);
+
+	// When not actively dragging, keep the rendered width in sync with the persisted value
+	// (e.g. after a viewport-resize clamp below).
+	useEffect(() => {
+		if (!isResizing) {
+			setWidth(clampWidth(persistedWidth, window.innerWidth));
+		}
+	}, [persistedWidth, isResizing]);
+
+	// On viewport resize, re-clamp only the *rendered* width — never the persisted preference. Writing
+	// localStorage on every resize event stutters, and clamping the stored value down would permanently
+	// lose the user's preferred width once they shrink then re-widen the window.
+	useEffect(() => {
+		const onResize = () => {
+			if (!isResizing) {
+				setWidth(clampWidth(persistedWidth, window.innerWidth));
+			}
+		};
+		window.addEventListener('resize', onResize);
+		return () => window.removeEventListener('resize', onResize);
+	}, [persistedWidth, isResizing]);
+
+	const startResizing = useCallback((event: React.MouseEvent) => {
+		event.preventDefault();
+		gestureRef.current = { startX: event.clientX, startWidth: widthRef.current };
+		setIsResizing(true);
+	}, []);
+
+	useEffect(() => {
+		if (!isResizing) {
+			return;
+		}
+		const onMouseMove = (event: MouseEvent) => {
+			const gesture = gestureRef.current;
+			if (!gesture) {
+				return;
+			}
+			setWidth(clampWidth(gesture.startWidth + (event.clientX - gesture.startX), window.innerWidth));
+		};
+		const onMouseUp = () => {
+			setIsResizing(false);
+			// Persist the final width once, instead of on every mousemove.
+			setPersistedWidth(widthRef.current);
+		};
+		// Suppress text selection across the page while dragging.
+		const previousUserSelect = document.body.style.userSelect;
+		document.body.style.userSelect = 'none';
+		window.addEventListener('mousemove', onMouseMove);
+		window.addEventListener('mouseup', onMouseUp);
+		return () => {
+			document.body.style.userSelect = previousUserSelect;
+			window.removeEventListener('mousemove', onMouseMove);
+			window.removeEventListener('mouseup', onMouseUp);
+		};
+	}, [isResizing, setPersistedWidth]);
+
+	// Keyboard resize for the focused separator: Arrow keys nudge the persisted width in fixed steps.
+	const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+		if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			setPersistedWidth((current) => clampWidth(current - KEYBOARD_STEP, window.innerWidth));
+		} else if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			setPersistedWidth((current) => clampWidth(current + KEYBOARD_STEP, window.innerWidth));
+		}
+	}, [setPersistedWidth]);
+
+	return { width, isResizing, startResizing, handleKeyDown };
+}
diff --git a/src/lib/storage/localStorageKeys.ts b/src/lib/storage/localStorageKeys.ts
index 8433b8ad7..40091f835 100644
--- a/src/lib/storage/localStorageKeys.ts
+++ b/src/lib/storage/localStorageKeys.ts
@@ -1,6 +1,7 @@
 export const enum LocalStorageKeys {
 	'AckedNotificationIds' = 'AckedNotificationIds',
 	'ApiExplorerSettings' = 'ApiExplorerSettings',
+	'ApiExplorerSidebarWidth' = 'ApiExplorerSidebarWidth',
 	'ApplicationChatPosition' = 'ApplicationChatPosition',
 	'ApplicationChatWidth' = 'ApplicationChatWidth',
 	'ApplicationsSidebarWidth' = 'ApplicationsSidebarWidth',