fix: formatting of code blocks width
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user