fix(editor): Restore full-width Agent preview (#39986)

packages/frontend/editor-ui/src/features/agents/views/AgentBuilderView.vue

@@ -3193,6 +3193,14 @@ useKeybindings({
 	max-width: 100%;
 	z-index: 1;
 	pointer-events: none;
+
+	&:has([data-preview-layout='fullpage']) {
+		width: 100%;
+
+		[data-dir='left'] {
+			display: none;
+		}
+	}
 }
 
 .previewResizeOpen {

packages/quality/testing/playwright/pages/AgentBuilderPage.ts

@@ -7,8 +7,36 @@ export class AgentBuilderPage extends BasePage {
 		super(page);
 	}
 
-	async goto(projectId: string, agentId: string): Promise<void> {
-		await this.page.goto(`/projects/${projectId}/agents/${agentId}`);
+	async goto(
+		projectId: string,
+		agentId: string,
+		options?: { openPreview?: boolean },
+	): Promise<void> {
+		const query = options?.openPreview ? '?openPreview=true' : '';
+		await this.page.goto(`/projects/${projectId}/agents/${agentId}${query}`);
+	}
+
+	getBuilderContainer(): Locator {
+		return this.page.locator('[data-testid="agent-builder-container"]');
+	}
+
+	getPreviewDock(): Locator {
+		return this.page.locator('[data-testid="agent-preview-dock"]');
+	}
+
+	getPreviewMoreButton(): Locator {
+		return this.getPreviewDock().locator('[data-testid="agent-preview-more-btn"]');
+	}
+
+	getFullWidthMenuItem(): Locator {
+		return this.page.getByRole('menuitemcheckbox', { name: 'Full width' });
+	}
+
+	async getPreviewWidthDifference(): Promise<number> {
+		const builderBounds = await this.getBuilderContainer().boundingBox();
+		const dockBounds = await this.getPreviewDock().boundingBox();
+		if (!builderBounds || !dockBounds) throw new Error('The preview layout is not visible');
+		return Math.abs(builderBounds.width - dockBounds.width);
 	}
 
 	getHeader(): Locator {

packages/quality/testing/playwright/tests/e2e/agents/agent-preview-layout.spec.ts

@@ -0,0 +1,48 @@
+import { nanoid } from 'nanoid';
+
+import { expect, test } from '../../../fixtures/base';
+
+test.use({
+	capability: {
+		env: {
+			N8N_ENABLED_MODULES: 'agents',
+			TEST_ISOLATION: 'agent-preview-layout',
+		},
+	},
+});
+
+test.describe(
+	'Agent preview layout',
+	{ annotation: [{ type: 'owner', description: 'AI' }] },
+	() => {
+		test('fills the builder when full width is selected', async ({ n8n, api }) => {
+			const project = await api.projects.getMyPersonalProject();
+			const { id: agentId } = await api.agents.create(project.id, `Preview layout ${nanoid(6)}`);
+
+			await n8n.start.fromHome();
+			await n8n.agentBuilder.goto(project.id, agentId, { openPreview: true });
+
+			const builder = n8n.agentBuilder.getBuilderContainer();
+			const dock = n8n.agentBuilder.getPreviewDock();
+			await expect(builder).toBeVisible();
+			await expect(dock).toBeVisible();
+			await expect(dock).toHaveAttribute('data-preview-layout', 'docked');
+
+			expect(await n8n.agentBuilder.getPreviewWidthDifference()).toBeGreaterThan(10);
+
+			await n8n.agentBuilder.getPreviewMoreButton().click();
+			await n8n.agentBuilder.getFullWidthMenuItem().click();
+			await expect(dock).toHaveAttribute('data-preview-layout', 'fullpage');
+
+			await expect
+				.poll(async () => await n8n.agentBuilder.getPreviewWidthDifference())
+				.toBeLessThan(2);
+
+			await n8n.page.setViewportSize({ width: 375, height: 667 });
+			await n8n.page.emulateMedia({ colorScheme: 'dark' });
+			await expect
+				.poll(async () => await n8n.agentBuilder.getPreviewWidthDifference())
+				.toBeLessThan(2);
+		});
+	},
+);