Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/file-preview-md-width.md
Original file line number Diff line number Diff line change
@@ -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.
8 changes: 6 additions & 2 deletions src/web/public/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
20 changes: 19 additions & 1 deletion test/file-preview-window.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -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<string, string> = {};
Expand Down Expand Up @@ -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');
Expand Down
Loading