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(<App/>);
     `}
   });
-  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:'<div id="root"></div><script src="/bundle.js"></script>');});
+  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:`<style>${css}</style><div class="reports-preview"><section class="reports-section"><div class="reports-trace-inspector"><section><div id="root"></div></section></div></section></div><script src="/bundle.js"></script>`);});
   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)); }
 });