From 34f7766d435a5f0419ba1572c9140d19f825c81f Mon Sep 17 00:00:00 2001 From: Devvyn <22340871+opticon454@users.noreply.github.com> Date: Sun, 25 Oct 2026 09:56:40 +0800 Subject: [PATCH 1/2] fix(file-preview): let rendered markdown fill the resized window The corner grip and Expand size the window correctly, but the document kept a fixed 960px reading column from before the resize feature existed, so text stopped reflowing once the window grew past it. Pinned by new rule 13 in file-preview-window.test.ts. Co-Authored-By: Claude Code --- .changeset/file-preview-md-width.md | 5 +++++ src/web/public/styles.css | 8 ++++++-- test/file-preview-window.test.ts | 20 +++++++++++++++++++- 3 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 .changeset/file-preview-md-width.md diff --git a/.changeset/file-preview-md-width.md b/.changeset/file-preview-md-width.md new file mode 100644 index 00000000..5a772310 --- /dev/null +++ b/.changeset/file-preview-md-width.md @@ -0,0 +1,5 @@ +--- +'aicodeman': patch +--- + +The rendered markdown in the File Viewer now fills the window as the window grows. The rule carried a fixed 960px reading column that shipped before the window could be resized, so text stopped reflowing once the window was dragged or expanded past it, while the plain-text view already filled it. A narrow window is unchanged, because a cap only binds when content is wider than it. Pinned by test/file-preview-window.test.ts. diff --git a/src/web/public/styles.css b/src/web/public/styles.css index 49af0d3e..18e9e56b 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -12544,13 +12544,17 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat /* ---- File Viewer rendered markdown ---- Styling comes from the Response Viewer's .rv-text rules; .rv-text itself - carries no padding or base font (the chat card supplies those). */ + carries no padding or base font (the chat card supplies those). + + No width cap. The window is whatever the user drags or expands it to, so the + document must reflow to fill it; the fixed 960px reading column this rule + shipped before the resize grip existed stops reflow once the window is wider + than the cap. Pinned by test/file-preview-window.test.ts. */ .file-preview-body > .file-preview-md { padding: 1rem 1.25rem 2rem; font-size: 15px; line-height: 1.55; - max-width: 960px; } /* Relative links in the document are rebased onto a.rv-path so the Response diff --git a/test/file-preview-window.test.ts b/test/file-preview-window.test.ts index bd9347dd..08842771 100644 --- a/test/file-preview-window.test.ts +++ b/test/file-preview-window.test.ts @@ -14,7 +14,9 @@ * 9. stepping onto a folder-grid page moves the grid's own index with it, * 10. Alt+←/→ steps, ignores other chords and text fields, and is swallowed at the ends, * 11. the corner grip doubles the pointer delta and clamps the size, - * 12. phones ignore Expand and the grip (mobile.css). + * 12. phones ignore Expand and the grip (mobile.css), + * 13. the rendered document carries no width cap, so it fills the window the + * grip and Expand give it (styles.css). * * Loaded via `vm` against a stub app, same harness style as file-preview-detach.test.ts. */ @@ -27,6 +29,7 @@ import { describe, expect, it, vi } from 'vitest'; const PUBLIC = resolve(import.meta.dirname, '../src/web/public'); const panelsJs = readFileSync(resolve(PUBLIC, 'panels-ui.js'), 'utf8'); const indexHtml = readFileSync(resolve(PUBLIC, 'index.html'), 'utf8'); +const stylesCss = readFileSync(resolve(PUBLIC, 'styles.css'), 'utf8'); function btn() { const attrs: Record = {}; @@ -376,6 +379,21 @@ describe('file viewer resize grip', () => { }); }); +describe('file viewer rendered markdown width', () => { + it('carries no fixed reading column, so the document fills the window the grip and Expand give it', () => { + const mdRule = stylesCss.match(/\.file-preview-body > \.file-preview-md \{[^}]*\}/); + expect(mdRule, 'the rule the rendered document lives in').not.toBeNull(); + // Any cap here reflows nothing once the window is wider than it, which is + // what the shipped 960px column did. The window width is the user's choice, + // so nothing in this rule may cap it. + expect(mdRule![0], 'no width cap on the document').not.toMatch(/max-width/); + // The shared .rv-text prose rule must not reintroduce one either. + const rvBase = stylesCss.match(/\.rv-text,\s*\.response-viewer-body > :not\(\.rv-message\) \{[^}]*\}/); + expect(rvBase, 'the shared prose rule').not.toBeNull(); + expect(rvBase![0], 'no width cap on the shared prose rule').not.toMatch(/max-width/); + }); +}); + describe('file viewer on phones', () => { it('overrides Expand and any dragged size, and hides both controls, under 600px', () => { const css = readFileSync(resolve(PUBLIC, 'mobile.css'), 'utf8'); From c708312a3fa421e142a02d42b487b85351de6a6d Mon Sep 17 00:00:00 2001 From: Codeman maintainer Date: Wed, 28 Oct 2026 09:09:37 +0100 Subject: [PATCH 2/2] fix: apply the review items for #730 at merge Set --rv-content-max: none on the File Viewer's rendered document, so ASCII-diagram blocks (capped by that variable with a 720px fallback the Response Viewer sets) follow the window like the rest of the document, and pin it with a third assertion. Co-Authored-By: Claude Opus 5.5 --- src/web/public/styles.css | 6 +++++- test/file-preview-window.test.ts | 3 +++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/web/public/styles.css b/src/web/public/styles.css index 18e9e56b..89fdc70b 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -12549,12 +12549,16 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat No width cap. The window is whatever the user drags or expands it to, so the document must reflow to fill it; the fixed 960px reading column this rule shipped before the resize grip existed stops reflow once the window is wider - than the cap. Pinned by test/file-preview-window.test.ts. */ + than the cap. --rv-content-max: none lets ASCII-diagram blocks + (.rv-text .rv-diagram-wrap, capped by that variable with a 720px fallback + meant for the Response Viewer) follow the rest of the document too. Pinned by + test/file-preview-window.test.ts. */ .file-preview-body > .file-preview-md { padding: 1rem 1.25rem 2rem; font-size: 15px; line-height: 1.55; + --rv-content-max: none; } /* Relative links in the document are rebased onto a.rv-path so the Response diff --git a/test/file-preview-window.test.ts b/test/file-preview-window.test.ts index 08842771..d69a1cf0 100644 --- a/test/file-preview-window.test.ts +++ b/test/file-preview-window.test.ts @@ -391,6 +391,9 @@ describe('file viewer rendered markdown width', () => { const rvBase = stylesCss.match(/\.rv-text,\s*\.response-viewer-body > :not\(\.rv-message\) \{[^}]*\}/); expect(rvBase, 'the shared prose rule').not.toBeNull(); expect(rvBase![0], 'no width cap on the shared prose rule').not.toMatch(/max-width/); + // ASCII-diagram blocks cap themselves at var(--rv-content-max, 720px), which only the + // Response Viewer sets; the document lifts it so a diagram follows the window too. + expect(mdRule![0], 'diagram blocks follow the window').toMatch(/--rv-content-max:\s*none;/); }); });