Apply the preview width preference to layout

scripts/previewWidth.test.ts

@@ -4,12 +4,14 @@ import test from 'node:test';
 
 import {
 	DEFAULT_PREVIEW_MAX_WIDTH,
+	getPreviewContentWidth,
 	MAX_PREVIEW_MAX_WIDTH,
 	MIN_PREVIEW_MAX_WIDTH,
 	normalizePreviewMaxWidth,
 } from '../src/lib/utils/previewWidth.js';
 
 const settingsSource = readFileSync(new URL('../src/lib/stores/settings.svelte.ts', import.meta.url), 'utf8');
+const viewerSource = readFileSync(new URL('../src/lib/MarkdownViewer.svelte', import.meta.url), 'utf8');
 
 test('preview width defaults and clamps persisted numeric values', () => {
 	assert.equal(DEFAULT_PREVIEW_MAX_WIDTH, 880);
@@ -26,10 +28,22 @@ test('preview width accepts only finite numeric values', () => {
 	assert.equal(normalizePreviewMaxWidth(1200), 1200);
 });
 
+test('full mode has no configured content-width cap', () => {
+	assert.equal(getPreviewContentWidth(1200, false), 1200);
+	assert.equal(getPreviewContentWidth(1200, true), null);
+});
+
 test('settings load, persist, and reset the preview width through one normalizer', () => {
 	assert.match(settingsSource, /previewMaxWidth = \$state\(DEFAULT_PREVIEW_MAX_WIDTH\)/);
 	assert.match(settingsSource, /localStorage\.getItem\('preview\.maxWidth'\)/);
 	assert.match(settingsSource, /normalizePreviewMaxWidth\(savedPreviewMaxWidth\)/);
 	assert.match(settingsSource, /localStorage\.setItem\('preview\.maxWidth', String\(this\.previewMaxWidth\)\)/);
 	assert.match(settingsSource, /resetPreviewMaxWidth\(\)[\s\S]*this\.previewMaxWidth = DEFAULT_PREVIEW_MAX_WIDTH/);
 });
+
+test('preview layout derives width and ToC geometry from the same preference', () => {
+	assert.match(viewerSource, /getPreviewContentWidth\(settings\.previewMaxWidth, isFullWidth\)/);
+	assert.match(viewerSource, /viewerWidth - previewContentWidth/);
+	assert.match(viewerSource, /--preview-max-width:/);
+	assert.match(viewerSource, /max-width: var\(--preview-max-width, 880px\)/);
+});

src/lib/MarkdownViewer.svelte

@@ -51,6 +51,7 @@ import {
 	import HomePage from './components/HomePage.svelte';
 import { tabManager } from './stores/tabs.svelte.js';
 import { snapshotTab } from './utils/tabTransfer.js';
+import { getPreviewContentWidth } from './utils/previewWidth.js';
 import { settings } from './stores/settings.svelte.js';
 import { t } from './utils/i18n.js';
 import { createWindowSession } from './sessions/windowSession.svelte.js';
@@ -222,7 +223,10 @@ import { createDocumentSession, type LoadMarkdownOptions } from './sessions/docu
 	const TOC_MAX_WIDTH = 420;
 	const TOC_RESIZE_STEP = 16;
 	let isTocResizing = $state(false);
-	let isOverhanging = $derived(isFullWidth || (viewerWidth > 0 && settings.tocWidth > Math.max(50, (viewerWidth - 780) / 2)));
+	let previewContentWidth = $derived(getPreviewContentWidth(settings.previewMaxWidth, isFullWidth));
+	let isOverhanging = $derived(
+		isFullWidth || (viewerWidth > 0 && previewContentWidth !== null && settings.tocWidth > Math.max(50, (viewerWidth - previewContentWidth) / 2)),
+	);
 
 	$effect(() => {
 		localStorage.setItem('isFullWidth', String(isFullWidth));
@@ -3136,7 +3140,7 @@ import { createDocumentSession, type LoadMarkdownOptions } from './sessions/docu
 										if(e.key === 'Enter' || e.key === ' ') handleLinkClick(e as unknown as MouseEvent);
 									}}
 									tabindex="-1"
-									style="outline: none; font-family: {settings.previewFont}, sans-serif; font-size: {settings.previewFontSize}px; flex: 1;">
+									style="outline: none; font-family: {settings.previewFont}, sans-serif; font-size: {settings.previewFontSize}px; flex: 1; --preview-max-width: {previewContentWidth === null ? '100%' : `${previewContentWidth}px`};">
 									{#if frontMatterInfo.exists}
 										<details
 											class="frontmatter-panel"
@@ -3460,7 +3464,7 @@ import { createDocumentSession, type LoadMarkdownOptions } from './sessions/docu
 		overflow-y: auto;
 		overflow-x: hidden;
 		transform: translate3d(0, 0, 0);
-		max-width: 880px;
+		max-width: var(--preview-max-width, 880px);
 		text-align: left;
 		overflow-wrap: anywhere;
 	}

src/lib/utils/previewWidth.ts

@@ -8,3 +8,7 @@ export function normalizePreviewMaxWidth(value: unknown): number {
 	if (!Number.isFinite(parsed)) return DEFAULT_PREVIEW_MAX_WIDTH;
 	return Math.min(MAX_PREVIEW_MAX_WIDTH, Math.max(MIN_PREVIEW_MAX_WIDTH, Math.round(parsed)));
 }
+
+export function getPreviewContentWidth(value: unknown, isFullWidth: boolean): number | null {
+	return isFullWidth ? null : normalizePreviewMaxWidth(value);
+}