From 403eb1c4d61924ac7f940b62828147271c176697 Mon Sep 17 00:00:00 2001 From: Josh Purtell Date: Thu, 10 Sep 2026 14:38:59 -0400 Subject: [PATCH] fix(desktop): fit nested report traces to editor width --- .../synth_desktop/src/renderer/src/styles/app.css | 15 +++++++++++++++ apps/synth_desktop/tests/trace-ux.test.mjs | 8 +++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/apps/synth_desktop/src/renderer/src/styles/app.css b/apps/synth_desktop/src/renderer/src/styles/app.css index 47a70c40..d4a9745e 100644 --- a/apps/synth_desktop/src/renderer/src/styles/app.css +++ b/apps/synth_desktop/src/renderer/src/styles/app.css @@ -10303,6 +10303,8 @@ html.visual-expanded .sidebar { .reports-field, .reports-section { display: grid; + grid-template-columns: minmax(0, 1fr); + min-width: 0; gap: 8px; margin-top: 16px; } @@ -10364,11 +10366,24 @@ html.visual-expanded .sidebar { } .reports-trace-inspector { display: grid; + grid-template-columns: minmax(0, 1fr); + min-width: 0; gap: 12px; padding: 12px; border: 1px solid var(--color-border); background: var(--color-surface); } +.reports-trace-inspector > *, +.reports-inline-form > * { + min-width: 0; + max-width: 100%; +} +.reports-layout .visuals-card-main { + display: grid; + gap: 4px; + text-align: left; + overflow-wrap: anywhere; +} .reports-lineage { display: grid; gap: 10px; diff --git a/apps/synth_desktop/tests/trace-ux.test.mjs b/apps/synth_desktop/tests/trace-ux.test.mjs index c53b0259..332494a9 100644 --- a/apps/synth_desktop/tests/trace-ux.test.mjs +++ b/apps/synth_desktop/tests/trace-ux.test.mjs @@ -2,11 +2,13 @@ import assert from 'node:assert/strict'; import test from 'node:test'; import { createServer } from 'node:http'; import { fileURLToPath } from 'node:url'; +import { readFile } from 'node:fs/promises'; import { build } from 'esbuild'; import { chromium } from 'playwright'; test('citation selection reveals filtered annotations and comparison needs one actor', async () => { const root = fileURLToPath(new URL('../../..', import.meta.url)); + const css = await readFile(new URL('../src/renderer/src/styles/app.css', import.meta.url), 'utf8'); const result = await build({ absWorkingDir: root, bundle:true, write:false, format:'iife', jsx:'automatic', stdin:{ resolveDir:root, loader:'tsx', contents:` import React,{useState} from 'react'; @@ -20,7 +22,7 @@ test('citation selection reveals filtered annotations and comparison needs one a createRoot(document.getElementById('root')).render(); `} }); - const server=createServer((req,res)=>{res.setHeader('Content-Type',req.url==='/bundle.js'?'text/javascript':'text/html');res.end(req.url==='/bundle.js'?result.outputFiles[0].text:'
');}); + const server=createServer((req,res)=>{res.setHeader('Content-Type',req.url==='/bundle.js'?'text/javascript':'text/html');res.end(req.url==='/bundle.js'?result.outputFiles[0].text:`
`);}); await new Promise(resolve=>server.listen(0,'127.0.0.1',resolve)); const browser=await chromium.launch({headless:true}); try { @@ -42,5 +44,9 @@ test('citation selection reveals filtered annotations and comparison needs one a await page.setViewportSize({width,height:840}); assert.equal(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth),true); } + for (const width of [420, 540, 720]) { + await page.locator('.reports-preview').evaluate((element, width) => { element.style.width = width + 'px'; }, width); + assert.equal(await page.locator('.reports-preview').evaluate(element => element.scrollWidth <= element.clientWidth + 1), true, `nested report preview fits ${width}px`); + } } finally { await browser.close(); await new Promise(resolve=>server.close(resolve)); } });