@selvajs/ui 6.6.0-beta.5 → 6.6.0-beta.7

package/dist/components/viewer/MeshMetadataPanel.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { Button } from '../primitives/button/index.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
+	interface Props {
+		metadata: Record<string, any>;
+		meshName: string | null;
+		onClose: () => void;
+		class?: string;
+	}
+
+	const EXCLUDED_KEYS = new Set(['name', 'layer', 'id']);
+
+	let { metadata, meshName, onClose, class: className = '' }: Props = $props();
+
+	const filteredMetadata = $derived.by(() => {
+		const result: Record<string, unknown> = {};
+		for (const [key, value] of Object.entries(metadata)) {
+			if (EXCLUDED_KEYS.has(key)) continue;
+			if (
+				key === 'metadata' &&
+				typeof value === 'object' &&
+				value !== null &&
+				!Array.isArray(value)
+			) {
+				Object.assign(result, value);
+			} else {
+				result[key] = value;
+			}
+		}
+		return result;
+	});
+</script>
+
+<!-- Not a modal: a modal locks the page, and on touch the tap that should dismiss it can race the
+     dialog's own dismiss handler, leaving the viewer frozen. A card lets the canvas keep orbiting. -->
+<section
+	aria-label={meshName ?? t.objectFallbackName}
+	class="min-h-0 shadow-lg backdrop-blur-sm flex flex-col overflow-hidden rounded-lg border bg-background/95 {className}"
+>
+	<header class="gap-2 py-1 pr-1 pl-4 flex items-center border-b">
+		<h2 class="text-sm font-semibold min-w-0 flex-1 truncate">
+			{meshName ?? t.objectFallbackName}
+		</h2>
+		<Button
+			variant="ghost"
+			size="icon-sm"
+			class="pointer-coarse:size-10 shrink-0"
+			aria-label={t.close}
+			title={t.close}
+			onclick={onClose}
+		>
+			<X />
+		</Button>
+	</header>
+
+	<div class="min-h-0 overflow-y-auto overscroll-contain">
+		{#if Object.keys(filteredMetadata).length === 0}
+			<p class="px-4 py-3 text-xs text-muted-foreground">{t.noMetadata}</p>
+		{:else}
+			<table class="text-xs w-full border-collapse">
+				<tbody>
+					{#each Object.entries(filteredMetadata) as [key, value] (key)}
+						<tr class="border-b border-border/60 last:border-b-0">
+							<th
+								scope="row"
+								class="px-4 py-2 font-normal text-left align-top whitespace-nowrap text-muted-foreground"
+								>{key}</th
+							>
+							<td class="px-4 py-2 text-right align-top text-foreground">
+								{#if typeof value === 'object' && value !== null}
+									{#if Array.isArray(value)}
+										<div class="space-y-1 text-left">
+											{#each value as item, index (index)}
+												{#if typeof item === 'object'}
+													<div class="space-y-0.5">
+														{#each Object.entries(item) as [k, v] (k)}
+															<div class="gap-2 flex">
+																<span class="shrink-0 text-muted-foreground">{k}:</span>
+																<span>{v}</span>
+															</div>
+														{/each}
+													</div>
+												{:else}
+													<div>{item}</div>
+												{/if}
+											{/each}
+										</div>
+									{:else}
+										<div class="space-y-0.5 text-left">
+											{#each Object.entries(value) as [k, v] (k)}
+												<div class="gap-2 flex">
+													<span class="shrink-0 text-muted-foreground">{k}:</span>
+													<span>{v}</span>
+												</div>
+											{/each}
+										</div>
+									{/if}
+								{:else if typeof value === 'number'}
+									<span class="font-mono">{value}</span>
+								{:else if typeof value === 'boolean'}
+									<span class={value ? 'text-success' : 'text-muted-foreground'}
+										>{value ? 'true' : 'false'}</span
+									>
+								{:else}
+									<span class="break-all">{value}</span>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</div>
+</section>

package/dist/components/viewer/MeshMetadataPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    metadata: Record<string, any>;
+    meshName: string | null;
+    onClose: () => void;
+    class?: string;
+}
+declare const MeshMetadataPanel: import("svelte").Component<Props, {}, "">;
+type MeshMetadataPanel = ReturnType<typeof MeshMetadataPanel>;
+export default MeshMetadataPanel;

package/dist/components/viewer/Viewer.svelte

@@ -34,7 +34,7 @@
 	import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 	import { createSceneOutliner, type SceneOutliner } from '@selvajs/visualization/scene';
 	import SceneManager from './SceneManager.svelte';
-	import MeshMetadataDialog from './MeshMetadataDialog.svelte';
+	import MeshMetadataPanel from './MeshMetadataPanel.svelte';
 	import * as Resizable from '../primitives/resizable/index.js';
 	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
 	import { Button } from '../primitives/button/index.js';
@@ -122,6 +122,7 @@
 	let updateGridScale: (() => void) | null = null;
 	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
+	let clearSelection: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
 	let hideButton = $state(false);
@@ -194,6 +195,10 @@
 			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			measure: { enabled: config.showToolsMenu },
 			events: {
+				// Fires before onMeshMetadataClicked, so picking an object without metadata closes the
+				// previous object's panel instead of leaving it describing the wrong thing.
+				onObjectSelected: closeMetadata,
+				onBackgroundClicked: closeMetadata,
 				onMeshMetadataClicked: config.enableMeshClick
 					? (metadata: Record<string, unknown>) => {
 							if (hasUsefulMetadata(metadata)) {
@@ -224,6 +229,7 @@
 		updateGridScale = init.updateGridScale;
 		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
+		clearSelection = init.clearSelection;
 		projection = init.cameraController.getProjection();
 
 		const renderer = init.renderer;
@@ -375,6 +381,29 @@
 		}
 	});
 
+	function closeMetadata() {
+		selectedMeshMetadata = null;
+		selectedMeshName = null;
+	}
+
+	function dismissMetadata() {
+		closeMetadata();
+		clearSelection?.();
+		invalidate?.();
+	}
+
+	// The panel describes an object from the previous solve once new meshes arrive.
+	$effect(() => {
+		void meshes;
+		untrack(closeMetadata);
+	});
+
+	// Dialogs portal to <body>, so one opened over the fullscreen viewer needs lifting above it.
+	$effect(() => {
+		document.body.toggleAttribute('data-viewer-fullscreen', isFullscreen);
+		return () => document.body.removeAttribute('data-viewer-fullscreen');
+	});
+
 	function toggleFullscreen() {
 		isFullscreen = !isFullscreen;
 	}
@@ -450,12 +479,9 @@
 				{/if}
 
 				{#if logoUrl}
-					<!-- Bottom offset matches the tools menu so it clears the mobile drawer handle.
-					     Always pointer-events:none so it never intercepts canvas drags. -->
+					<!-- pointer-events:none so it never intercepts canvas drags. -->
 					<div
-						class="right-4 {isFullscreen
-							? 'bottom-4'
-							: 'bottom-16 sm:bottom-4'} pointer-events-none absolute z-20 {hideButton
+						class="right-4 bottom-4 pointer-events-none absolute z-20 {hideButton
 							? 'opacity-0'
 							: ''}"
 					>
@@ -467,11 +493,18 @@
 					</div>
 				{/if}
 
+				{#if selectedMeshMetadata}
+					<MeshMetadataPanel
+						metadata={selectedMeshMetadata}
+						meshName={selectedMeshName}
+						onClose={dismissMetadata}
+						class="top-3 right-3 left-3 sm:right-auto sm:max-h-2/3 sm:w-72 absolute z-30 max-h-1/2"
+					/>
+				{/if}
+
 				{#if config.showToolsMenu}
 					<div
-						class="left-4 {isFullscreen
-							? 'bottom-4'
-							: 'bottom-16 sm:bottom-4'} shadow-lg absolute z-50 flex items-center rounded-lg {hideButton
+						class="left-4 bottom-4 gap-2 *:shadow-lg absolute z-50 flex items-center *:rounded-md {hideButton
 							? 'pointer-events-none opacity-0'
 							: ''}"
 					>
@@ -594,6 +627,18 @@
 								{/if}
 							</DropdownMenu.Content>
 						</DropdownMenu.Root>
+						<!-- Touch has no F key, and fit-to-view is the way back from a framed part. -->
+						<div class="hidden pointer-coarse:block">
+							<Button
+								variant="outline"
+								size="icon-lg"
+								title={t.fitToView}
+								aria-label={t.fitToView}
+								onclick={() => fitToView?.()}
+							>
+								<Frame />
+							</Button>
+						</div>
 					</div>
 				{/if}
 			</div>
@@ -608,22 +653,12 @@
 	</Resizable.PaneGroup>
 </div>
 
-<MeshMetadataDialog
-	open={selectedMeshMetadata !== null}
-	metadata={selectedMeshMetadata}
-	meshName={selectedMeshName}
-	{isFullscreen}
-	onOpenChange={(open: boolean) => {
-		if (!open) {
-			setTimeout(() => {
-				selectedMeshMetadata = null;
-				selectedMeshName = null;
-			}, 200);
-		}
-	}}
-/>
-
 <style>
+	:global([data-viewer-fullscreen] [data-slot='dialog-content']),
+	:global([data-viewer-fullscreen] [data-slot='dialog-overlay']) {
+		z-index: 10001;
+	}
+
 	.fullscreen-viewer {
 		position: fixed;
 		inset: 0;

package/dist/styles/base.css

@@ -3,7 +3,7 @@
 :root {
 	--radius: 0.625rem;
 	--header-h: 3.5rem;
-	--page-px: 1.5rem;
+	--page-px: 1rem;
 	--page-py: 1.75rem;
 	--background: oklch(0.99 0 0);
 	--foreground: oklch(0.22 0 0);
@@ -180,6 +180,26 @@
 	border-radius: inherit;
 }
 
+/* Phones keep a narrower gutter: at 390px every 8px of side padding is 2% of the width. */
+@media (min-width: 40rem) {
+	:root {
+		--page-px: 1.5rem;
+	}
+}
+
+/* A native select draws its arrow inside the right padding, so with the `px-2`/`px-3` every
+   caller uses it sits on the border. A drawn chevron with its own gutter fixes them all. Unlayered
+   on purpose: the gutter has to beat the callers' `px-*` utilities. Mid-grey reads on both themes,
+   since a data URI can't take `currentColor`. */
+select:not([multiple]):not([size]) {
+	appearance: none;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 0.625rem center;
+	background-size: 1.1em;
+	padding-inline-end: calc(1.1em + 1rem);
+}
+
 @layer base {
 	* {
 		@apply border-border outline-ring;

package/dist/utils/loadScript.d.ts

@@ -4,6 +4,8 @@
  */
 export declare function loadScript(src: string, options?: {
     crossOrigin?: string;
+    /** Subresource Integrity hash. A cross-origin script also needs `crossOrigin`. */
+    integrity?: string;
     async?: boolean;
     defer?: boolean;
 }): Promise<void>;

package/dist/utils/loadScript.js

@@ -17,6 +17,8 @@ export function loadScript(src, options) {
         script.src = src;
         if (options?.crossOrigin)
             script.crossOrigin = options.crossOrigin;
+        if (options?.integrity)
+            script.integrity = options.integrity;
         if (options?.async !== undefined)
             script.async = options.async;
         if (options?.defer !== undefined)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.6.0-beta.5",
+  "version": "6.6.0-beta.7",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -59,10 +59,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.186.1",
-    "@selvajs/compute": "^4.2.2-beta.0",
-    "@selvajs/schemas": "^5.2.0",
-    "@selvajs/solve": "^1.3.0-beta.2",
-    "@selvajs/visualization": "^1.5.0"
+    "@selvajs/compute": "^4.3.0-beta.1",
+    "@selvajs/schemas": "^5.3.0-beta.0",
+    "@selvajs/visualization": "^1.6.0-beta.0",
+    "@selvajs/solve": "^1.3.0-beta.3"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -90,11 +90,11 @@
     "svelte": "5.57.1",
     "tailwind-variants": "^3.3.1",
     "vitest": "^5.0.2",
-    "@selvajs/compute": "4.2.2-beta.0",
+    "@selvajs/compute": "4.3.0-beta.1",
     "@selvajs/config": "0.0.4",
-    "@selvajs/visualization": "1.5.0",
-    "@selvajs/solve": "1.3.0-beta.2",
-    "@selvajs/schemas": "5.2.0"
+    "@selvajs/visualization": "1.6.0-beta.0",
+    "@selvajs/solve": "1.3.0-beta.3",
+    "@selvajs/schemas": "5.3.0-beta.0"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/ErrorScreen.svelte

@@ -18,7 +18,7 @@
 	const t = $derived(locale.messages);
 </script>
 
-<div class="p-4 flex min-h-screen items-center justify-center bg-background">
+<div class="p-4 flex min-h-dvh items-center justify-center bg-background">
 	<Card.Root class="max-w-md w-full">
 		<Card.Header>
 			<div class="gap-4 flex flex-col items-center text-center">

package/src/lib/components/compute/AppLayout.svelte

@@ -26,6 +26,11 @@
 
 	interface Props {
 		schema: UISchema;
+		/**
+		 * Whether to draw the 3D viewer. Each host reads its own switch: the plugin's preview
+		 * `viewerOptions.enableLocal`, a Rhino.Compute host `viewerOptions.enableRemote`.
+		 */
+		showViewer: boolean;
 		meshes?: any[];
 		isSolving: boolean;
 		showSolvingIndicator?: boolean;
@@ -54,6 +59,7 @@
 
 	let {
 		schema,
+		showViewer: hasViewer,
 		meshes = [],
 		isSolving,
 		showSolvingIndicator = false,
@@ -81,9 +87,6 @@
 	const hasMenu = $derived(showSaveButton || showLoadButton || panelActions.length > 0);
 	const resultIsStale = $derived(hasPendingChanges || hasNeverSolved);
 
-	const hasViewer = $derived(
-		!!(schema?.viewerOptions?.enableLocal || schema?.viewerOptions?.enableRemote)
-	);
 	const shownTabs = $derived(
 		schema.layout.type === 'tabbed'
 			? schema.layout.tabs.filter((tab) => isTabVisible(tab, values))
@@ -121,9 +124,14 @@
 	const isTwoPanelMode = $derived(!hasViewer && hasLeftPanel && hasRightPanel);
 
 	let isMobile = $state(false);
-	let drawerOpen = $state(false);
+	// Half keeps the model visible above the fields so a change can be watched as it solves;
+	// full is for long forms.
+	type DrawerState = 'closed' | 'half' | 'full';
+	let drawer = $state<DrawerState>('closed');
+	const DRAWER_STATES: DrawerState[] = ['closed', 'half', 'full'];
 
-	const activeLeftTabLabel = $derived(leftTabs[0]?.label ?? t.parametersTab);
+	// With several tabs the first tab's name would mislabel whichever one is showing.
+	const drawerLabel = $derived(leftTabs.length === 1 ? leftTabs[0].label : t.parametersTab);
 
 	$effect(() => {
 		const mqMobile = window.matchMedia('(max-width: 639px)');
@@ -151,19 +159,31 @@
 		await onLoadValues?.(loadedValues);
 	}
 
-	let _touchStartY = 0;
+	let touchStartY = 0;
+
+	function stepDrawer(by: number) {
+		const index = DRAWER_STATES.indexOf(drawer) + by;
+		drawer = DRAWER_STATES[Math.max(0, Math.min(DRAWER_STATES.length - 1, index))];
+	}
 
 	function onDrawerTouchStart(e: TouchEvent) {
-		_touchStartY = e.touches[0].clientY;
+		touchStartY = e.touches[0].clientY;
 	}
 
 	function onDrawerTouchEnd(e: TouchEvent) {
-		const deltaY = e.changedTouches[0].clientY - _touchStartY;
+		const deltaY = e.changedTouches[0].clientY - touchStartY;
 		const SWIPE_THRESHOLD = 40;
 		if (Math.abs(deltaY) > SWIPE_THRESHOLD) {
-			drawerOpen = deltaY < 0; // swipe up → open, swipe down → close
+			// Suppresses the click a short swipe can still end in, which would step the drawer twice.
+			e.preventDefault();
+			stepDrawer(deltaY < 0 ? 1 : -1);
 		}
 	}
+
+	// A tap walks closed → half → full → closed.
+	function onDrawerHandleClick() {
+		drawer = drawer === 'full' ? 'closed' : DRAWER_STATES[DRAWER_STATES.indexOf(drawer) + 1];
+	}
 </script>
 
 <!-- Everything but Calculate: saving and loading inputs, then the host's own actions. -->
@@ -276,16 +296,19 @@
 		: 'sm:pl-(--page-px)'} {rightCollapsed ? 'sm:pr-0' : 'sm:pr-(--page-px)'}"
 	class:fullscreen-layout={isViewerFullscreen}
 	class:relative={isMobile}
+	class:mobile-root={isMobile}
 >
 	{#if isMobile}
 		{#if hasViewer}
-			<div class="min-h-0 flex flex-1 flex-col">
+			<!-- Ends above the drawer rather than behind it, so the model stays centred in what is
+			     visible. It jumps straight to its new size: animating it would resize the canvas,
+			     and its render targets, on every frame of the drawer's slide. -->
+			<div class="viewer-region" class:viewer-region-raised={drawer !== 'closed'}>
 				<Viewer
 					{meshes}
 					bind:isFullscreen={isViewerFullscreen}
 					{isSolving}
-					isBlurred={drawerOpen}
-					{drawerOpen}
+					drawerOpen={drawer === 'full'}
 					{logoUrl}
 					{onViewerReady}
 					viewerConfig={{
@@ -297,31 +320,30 @@
 			</div>
 
 			<div
-				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet"
-				class:drawer-open={drawerOpen}
-				class:drawer-closed={!drawerOpen}
+				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet drawer-{drawer}"
 			>
 				<!-- Named by its visible label; aria-expanded carries the open/closed state. -->
 				<button
-					class="drawer-handle-bar"
-					onclick={() => (drawerOpen = !drawerOpen)}
+					class="drawer-handle-bar touch-none"
+					onclick={onDrawerHandleClick}
 					ontouchstart={onDrawerTouchStart}
 					ontouchend={onDrawerTouchEnd}
-					aria-expanded={drawerOpen}
+					aria-expanded={drawer !== 'closed'}
 				>
 					<div class="drawer-pill"></div>
-					<span class="text-sm font-medium ml-2 text-foreground">{activeLeftTabLabel}</span>
+					<span class="text-sm font-medium ml-2 text-foreground">{drawerLabel}</span>
 					<ChevronUp
 						size={16}
-						class="ml-auto text-muted-foreground transition-transform duration-300 {drawerOpen
-							? ''
-							: 'rotate-180'}"
+						class="ml-auto text-muted-foreground transition-transform duration-300 {drawer ===
+						'full'
+							? 'rotate-180'
+							: ''}"
 					/>
 				</button>
 
 				<!-- Inert while closed: the fields are clipped out of view, and tabbing into them
 				     would scroll the drawer's insides around behind the handle. -->
-				<div class="drawer-content" inert={!drawerOpen}>
+				<div class="drawer-content" inert={drawer === 'closed'}>
 					<div class="px-3 pb-6">
 						{#if hasLeftPanel}
 							{@render panelContent(hasRightPanel ? 'left' : undefined, requestedLeftTabId, false)}
@@ -340,7 +362,7 @@
 					</div>
 				</div>
 
-				{@render drawerFooter(!drawerOpen)}
+				{@render drawerFooter(drawer === 'closed')}
 			</div>
 		{:else}
 			<div class="flex flex-1 flex-col overflow-hidden">
@@ -531,6 +553,22 @@
 		gap: 0.5rem;
 	}
 
+	.mobile-root {
+		--drawer-closed-h: 60px;
+		--drawer-half-h: 50%;
+	}
+
+	.viewer-region {
+		position: absolute;
+		inset: 0 0 var(--drawer-closed-h) 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.viewer-region-raised {
+		bottom: var(--drawer-half-h);
+	}
+
 	.drawer-container {
 		position: absolute;
 		bottom: 0;
@@ -543,12 +581,14 @@
 	}
 
 	.drawer-closed {
-		height: 60px;
+		height: var(--drawer-closed-h);
+	}
+	.drawer-half {
+		height: var(--drawer-half-h);
 	}
-	/* The pinned footer takes a fixed slice, so a short phone opens the drawer further to leave
-	   room for the fields; a tall one keeps it at 60% of the screen. */
-	.drawer-open {
-		height: max(60svh, min(30rem, 100svh - 10rem));
+	/* Leaves a strip of the model showing, so the sheet still reads as sitting over the viewer. */
+	.drawer-full {
+		height: calc(100% - 3rem);
 	}
 
 	.drawer-handle-bar {

package/src/lib/components/compute/ComputeApp.svelte

@@ -283,6 +283,7 @@
 			{#key definitionKey}
 				<AppLayout
 					{schema}
+					showViewer={!!schema.viewerOptions?.enableRemote}
 					meshes={session.meshes}
 					isSolving={session.isSolving}
 					showSolvingIndicator={schema.instanceSolve !== false && solvingIndicator.show}

package/src/lib/components/layout/AppShell.svelte

@@ -74,14 +74,16 @@
 
 	const rootClass = $derived(
 		_mode === 'fixed'
-			? `flex flex-col h-screen overflow-hidden bg-background ${className}`
-			: `flex flex-col min-h-screen bg-background ${className}`
+			? // dvh, not vh: iOS sizes 100vh to the viewport without its toolbar, which hides the
+				// footer and the phone drawer's handle behind the toolbar.
+				`flex flex-col h-dvh overflow-hidden bg-background ${className}`
+			: `flex flex-col min-h-dvh bg-background ${className}`
 	);
 
 	const bodyShellClass = $derived(
 		_mode === 'fixed'
-			? `flex flex-1 min-h-0 ${sidenav ? 'flex-row' : 'flex-col'} ${bodyClass}`.trim()
-			: `flex-1 ${sidenav ? 'flex flex-row' : ''} ${bodyClass}`.trim()
+			? `flex flex-1 min-h-0 ${sidenav ? 'flex-col sm:flex-row' : 'flex-col'} ${bodyClass}`.trim()
+			: `flex-1 ${sidenav ? 'flex flex-col sm:flex-row' : ''} ${bodyClass}`.trim()
 	);
 
 	const bodyShellStyle = '';
@@ -92,13 +94,15 @@
 	const sidenavWrapClass = $derived(
 		_mode === 'fixed'
 			? 'flex shrink-0'
-			: 'flex shrink-0 self-start sticky top-(--header-h) max-h-[calc(100svh-var(--header-h))]'
+			: 'flex shrink-0 sm:self-start sm:sticky sm:top-(--header-h) sm:max-h-[calc(100svh-var(--header-h))]'
 	);
 
 	// The sticky wrapper is only as tall as its content, so in scroll mode the divider comes
 	// from the main column's left edge — that one spans the full body height.
 	const mainClass = $derived(
-		_mode === 'fixed' ? 'flex-1 overflow-y-auto' : 'flex-1 overflow-y-auto border-l border-border'
+		_mode === 'fixed'
+			? 'min-h-0 flex-1 overflow-y-auto'
+			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>
 

package/src/lib/components/layout/PageHeader.svelte

@@ -31,27 +31,31 @@
 <header
 	class={`top-0 backdrop-blur-sm sticky z-40 border-b border-border bg-background/90 ${className}`}
 >
-	<div class="gap-5 flex h-(--header-h) items-center px-(--page-px)">
+	<div class="gap-2 sm:gap-5 flex h-(--header-h) items-center px-(--page-px)">
 		<!-- Logo -->
-		<a href={homeUrl} class="gap-2 flex shrink-0 items-center">
+		<a href={homeUrl} class="gap-2 flex shrink-0 items-center" aria-label={brandName}>
 			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
-			<span class="font-semibold text-sm tracking-tight">{brandName}</span>
+			<!-- On a phone the page title needs the room more than the brand does. -->
+			<span
+				class="font-semibold text-sm tracking-tight {title !== undefined ? 'sm:inline hidden' : ''}"
+				>{brandName}</span
+			>
 		</a>
 
 		{#if title !== undefined}
-			<span class="text-sm text-border">/</span>
-			<span class="text-sm font-medium text-muted-foreground">{title ?? ''}</span>
+			<span class="text-sm shrink-0 text-border">/</span>
+			<span class="text-sm font-medium min-w-0 truncate text-muted-foreground">{title ?? ''}</span>
 		{/if}
 
 		<!-- Primary nav next to logo -->
 		{#if navItems}
-			<nav class="ml-5 gap-1 flex">
+			<nav class="sm:ml-5 gap-1 flex shrink-0">
 				{@render navItems()}
 			</nav>
 		{/if}
 
 		<!-- Right cluster: identity + utilities, anchored flush-right -->
-		<div class="gap-2 ml-auto flex items-center">
+		<div class="gap-2 ml-auto flex shrink-0 items-center">
 			{#if rightContent}
 				{@render rightContent()}
 			{/if}