fix: formatting of code blocks width

This commit is contained in:
2026-02-22 13:33:20 +01:00
parent b67ffbd38a
commit d2cc94d3b9
2 changed files with 18 additions and 3 deletions

View File

@@ -17,9 +17,9 @@
.blog-menu-submenu .blog-menu-list { flex-direction: column; flex-wrap: nowrap; gap: .2rem; } .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:hover > .blog-menu-submenu,
.blog-menu-item-with-children:focus-within > .blog-menu-submenu { display: block; } .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 { 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; 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 { 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; } .post pre code { display: block; font-size: .88rem; line-height: 1.5; white-space: pre; }
.code-copy-button { .code-copy-button {
position: absolute; position: absolute;
top: .4rem; top: .4rem;

View File

@@ -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; }'); 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 () => { it('renders single post title as h1', async () => {
const post = makePost({ const post = makePost({
id: 'single-title', id: 'single-title',