From d2cc94d3b90f3188e100745f65acaedcf0b0f5e1 Mon Sep 17 00:00:00 2001 From: hugo Date: Sun, 22 Feb 2026 13:33:20 +0100 Subject: [PATCH] fix: formatting of code blocks width --- src/main/engine/templates/partials/styles.liquid | 6 +++--- tests/engine/PreviewServer.test.ts | 15 +++++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/main/engine/templates/partials/styles.liquid b/src/main/engine/templates/partials/styles.liquid index ba28dbf..9c141a1 100644 --- a/src/main/engine/templates/partials/styles.liquid +++ b/src/main/engine/templates/partials/styles.liquid @@ -17,9 +17,9 @@ .blog-menu-submenu .blog-menu-list { flex-direction: column; flex-wrap: nowrap; gap: .2rem; } .blog-menu-item-with-children:hover > .blog-menu-submenu, .blog-menu-item-with-children:focus-within > .blog-menu-submenu { display: block; } - .post { border: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); padding: 1rem; background: var(--pico-card-background-color, var(--card-background-color)); } - .post pre { position: relative; overflow-x: auto; border: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); border-radius: .3rem; margin: .9rem 0; padding: .85rem .9rem; background: var(--pico-code-background-color, rgba(33, 38, 45, .82)); } - .post pre code { display: block; font-size: .88rem; line-height: 1.5; } + .post { border: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); padding: 1rem; background: var(--pico-card-background-color, var(--card-background-color)); min-width: 0; } + .post pre { position: relative; overflow-x: auto; max-width: 100%; border: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); border-radius: .3rem; margin: .9rem 0; padding: .85rem .9rem; background: var(--pico-code-background-color, rgba(33, 38, 45, .82)); box-sizing: border-box; } + .post pre code { display: block; font-size: .88rem; line-height: 1.5; white-space: pre; } .code-copy-button { position: absolute; top: .4rem; diff --git a/tests/engine/PreviewServer.test.ts b/tests/engine/PreviewServer.test.ts index 614aa56..c449c5e 100644 --- a/tests/engine/PreviewServer.test.ts +++ b/tests/engine/PreviewServer.test.ts @@ -727,6 +727,21 @@ describe('PreviewServer', () => { expect(html).toContain('.lb-nav a, .lb-nav a:hover, .lb-nav a:focus-visible { border: 0; box-shadow: none; outline: none; text-decoration: none; }'); }); + it('keeps code blocks constrained to post column width with horizontal overflow inside the block', async () => { + server = new PreviewServer({ + postEngine: makeEngine([makePost({ content: '```js\nconst line = "x".repeat(1000);\n```' })]), + settingsEngine: makeSettings(50), + getActiveProjectContext: async () => ({ projectId: 'default' }), + }); + + await server.start(0); + + const html = await (await fetch(`${server.getBaseUrl()}/`)).text(); + expect(html).toContain('.post { border: 1px solid var(--pico-muted-border-color, var(--muted-border-color)); padding: 1rem; background: var(--pico-card-background-color, var(--card-background-color)); min-width: 0; }'); + expect(html).toContain('.post pre { position: relative; overflow-x: auto; max-width: 100%;'); + expect(html).toContain('.post pre code { display: block; font-size: .88rem; line-height: 1.5; white-space: pre; }'); + }); + it('renders single post title as h1', async () => { const post = makePost({ id: 'single-title',