diff --git a/ui/src/components/form-controls.browser.test.ts b/ui/src/components/form-controls.browser.test.ts
index 3c193fd6e31a..4a567d358113 100644
--- a/ui/src/components/form-controls.browser.test.ts
+++ b/ui/src/components/form-controls.browser.test.ts
@@ -22,12 +22,15 @@ let mobileContext: BrowserContext;
function readUiCss(): string {
const files = [
"ui/src/styles/base.css",
- "ui/src/styles/components.css",
- "ui/src/styles/config.css",
- "ui/src/styles/settings.css",
"ui/src/styles/layout.css",
+ "ui/src/styles/layout.mobile.css",
+ "ui/src/styles/components.css",
+ "ui/src/styles/settings.css",
+ "ui/src/styles/config.css",
"ui/src/styles/usage.css",
"ui/src/styles/chat/layout.css",
+ "ui/src/styles/sidebar-markdown.css",
+ "ui/src/styles/chat/sidebar.css",
];
return files.map((file) => readStyleSheet(file)).join("\n");
}
@@ -354,6 +357,186 @@ describeBrowserLayout("mount fallback cursor", () => {
});
describeBrowserLayout("app chrome interaction styles", () => {
+ it("scales sidebar typography with the Control UI text-size preference", async () => {
+ const page = await desktopContext.newPage();
+ try {
+ await page.setViewportSize({ width: 1200, height: 800 });
+ await page.setContent(`
+
+
+
+
+ Navigation
+
+ 3m
+
+
+
+
+
+ Dock here
+ 3 files
+
+
+
+ 1/2
+
+
+ Unsaved changes
+
+
+
+
+ `);
+
+ const selectors = [
+ ".nav-item__text",
+ ".sidebar-recent-session__name",
+ ".session-row-trail",
+ ".sidebar-session-catalog-host__count",
+ ".sidebar-session-catalog-project__count",
+ ".sidebar-agent-card__name",
+ ".settings-sidebar__item-label",
+ ".sidebar-file-view__path",
+ ".chat-workbench__dock-zone",
+ ".chat-workspace-rail__file-badge",
+ ".session-menu__shortcut",
+ ".file-view__search-counter",
+ ".file-view__save-notice",
+ ".sidebar-markdown pre code",
+ ".md-preview-dialog__reader.sidebar-markdown > p",
+ ".md-preview-dialog__reader.sidebar-markdown > h3",
+ ".md-preview-dialog__reader.sidebar-markdown td",
+ ];
+ const readFontSizes = () =>
+ page.evaluate((targets) => {
+ return Object.fromEntries(
+ targets.map((selector) => {
+ const node = document.querySelector(selector);
+ if (!(node instanceof HTMLElement)) {
+ throw new Error(`Missing sidebar typography fixture ${selector}`);
+ }
+ return [selector, Number.parseFloat(getComputedStyle(node).fontSize)];
+ }),
+ );
+ }, selectors);
+
+ const baseline = await readFontSizes();
+ const baselineInput = await page.$eval(".file-view__search input", (node) =>
+ Number.parseFloat(getComputedStyle(node).fontSize),
+ );
+ await page.evaluate(() => {
+ document.documentElement.style.setProperty("--control-ui-text-scale", "1.4");
+ });
+ const scaled = await readFontSizes();
+ const scaledInput = await page.$eval(".file-view__search input", (node) =>
+ Number.parseFloat(getComputedStyle(node).fontSize),
+ );
+
+ for (const selector of selectors) {
+ const baselineSize = baseline[selector];
+ const scaledSize = scaled[selector];
+ if (baselineSize === undefined || scaledSize === undefined) {
+ throw new Error(`Missing computed sidebar font size for ${selector}`);
+ }
+ expect(scaledSize, selector).toBeCloseTo(baselineSize * 1.4, 1);
+ }
+ expect(baselineInput).toBe(12);
+ expect(scaledInput).toBeCloseTo(12 * 1.4, 1);
+ for (const selector of [
+ ".sidebar-child-session-toggle",
+ ".sidebar-session-catalog-host__count",
+ ".sidebar-session-catalog-project__count",
+ ]) {
+ const fits = await page.$eval(selector, (node) => node.scrollWidth <= node.clientWidth);
+ expect(fits, selector).toBe(true);
+ }
+ } finally {
+ await page.close().catch(() => {});
+ }
+ });
+
+ it("scales mobile sidebar variants while preserving the coarse-pointer input floor", async () => {
+ const page = await mobileContext.newPage();
+ try {
+ await page.setContent(`
+
+
+
+
+
+
+
+
+
Mobile navigation
+
+
+
+