mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-22 01:02:41 +00:00
Mohamed Boudra
cc744cc669
* feat(app): let users set the chat and Markdown content width Wide and ultrawide screens were stuck with an 820px reading column. The width is now an Appearance setting that flows through the Unistyles theme, like the font sizes, so every content surface picks it up. The stored value stays null until the user picks a width, so a future change to the default reaches everyone who never customized it. Reset writes null back. The native composer dock keeps plain React Native styles and takes the width inline because those styles land on Reanimated views, where theme-driven Unistyles crash on theme changes. * fix(app): pass the content width into the web stream viewport The viewport read app settings itself, which required a QueryClient in every render of the stream strategy. The agent stream view already reads settings, so it hands the width over with the rest of the render input.
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { test } from "../support/fixtures";
|
|
import {
|
|
expectContentColumnWidth,
|
|
expectCustomContentWidthSetting,
|
|
expectDefaultContentWidthSetting,
|
|
openAppearanceSettings,
|
|
resetContentWidth,
|
|
setContentWidth,
|
|
} from "../support/helpers/content-width";
|
|
import { openFileExplorer, openFileFromExplorer } from "../support/helpers/file-explorer";
|
|
import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
|
|
|
|
const ULTRAWIDE_VIEWPORT = { width: 2560, height: 1080 };
|
|
|
|
test("widens chat and Markdown files to the chosen content width and resets to the default", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
test.setTimeout(120_000);
|
|
const agent = await seedMockAgentWorkspace({
|
|
repoPrefix: "content-width-",
|
|
title: "Content width",
|
|
initialPrompt: "Write a long paragraph.",
|
|
});
|
|
|
|
try {
|
|
await agent.client.waitForFinish(agent.agentId, 30_000);
|
|
await page.setViewportSize(ULTRAWIDE_VIEWPORT);
|
|
const assistantMessage = page.getByTestId("assistant-message").first();
|
|
const markdownPreview = page.getByTestId("markdown-preview-frame").first();
|
|
|
|
await test.step("chat starts at the default width", async () => {
|
|
await openAgentRoute(page, agent);
|
|
await expectContentColumnWidth(assistantMessage, { max: 820 });
|
|
});
|
|
|
|
await test.step("settings show the default without a reset", async () => {
|
|
await openAppearanceSettings(page);
|
|
await expectDefaultContentWidthSetting(page, 820);
|
|
});
|
|
|
|
await test.step("a custom width is saved and offers a reset", async () => {
|
|
await setContentWidth(page, 1600);
|
|
await expectCustomContentWidthSetting(page, 1600);
|
|
await page.screenshot({ path: testInfo.outputPath("settings-custom-width.png") });
|
|
});
|
|
|
|
await test.step("chat and Markdown files use the custom width", async () => {
|
|
await openAgentRoute(page, agent);
|
|
await expectContentColumnWidth(assistantMessage, { min: 1200, max: 1600 });
|
|
await page.screenshot({ path: testInfo.outputPath("chat-custom-width.png") });
|
|
|
|
await openFileExplorer(page);
|
|
await openFileFromExplorer(page, "README.md");
|
|
await expectContentColumnWidth(markdownPreview, { min: 1200, max: 1600 });
|
|
await page.screenshot({ path: testInfo.outputPath("markdown-custom-width.png") });
|
|
});
|
|
|
|
await test.step("reset returns to the default without storing it", async () => {
|
|
await openAppearanceSettings(page);
|
|
await resetContentWidth(page);
|
|
await expectDefaultContentWidthSetting(page, 820);
|
|
|
|
await openAgentRoute(page, agent);
|
|
await expectContentColumnWidth(assistantMessage, { max: 820 });
|
|
await page.screenshot({ path: testInfo.outputPath("chat-default-width.png") });
|
|
});
|
|
} finally {
|
|
await agent.cleanup();
|
|
}
|
|
});
|