From a13bc5a7829b0724aa36d98a0ba7e2823d174f4f Mon Sep 17 00:00:00 2001 From: Danny Avila Date: Mon, 4 May 2026 19:11:54 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9=20fix:=20revert=20body=20flex=20on?= =?UTF-8?q?=20PPTX=20bootstrap=20(caused=20black-screen=20render)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Manual e2e regression on PR #12934: the previous commit added `body { display: flex; flex-direction: column }` plus `#lc-render { flex: 1 0 auto }` to fill the panel height. Side effect: pptx-preview's internal layout assumes block flow on its ancestor elements; making body a flex container caused slides to render as solid-black rectangles (sized correctly, but with no visible content inside). Fix: keep just `html, body { min-height: 100vh }` for the bg-fill effect — that alone gives empty space below short decks the dark theme bg without changing flow. Drop the body-flex and the `#lc-render { flex: 1 0 auto }` directives. The height-aware `scaleFor(nativeW, nativeH)` from the same commit stays — it doesn't interact with pptx-preview's layout, just chooses a per-slide scale. Each slide still grows to fit the viewport contain-style. Negative-assertion added to the regression test: `body { display: flex }` must NOT appear in the bootstrap, so a future "let's flex the body to make height work" rewrite can't silently re-introduce this. (Note: the user also flagged DOCX theming as faint body text; I'm leaving that for now per their note that it may be pre-existing. Not addressed in this commit.) --- packages/api/src/files/documents/html.spec.ts | 7 +++++++ packages/api/src/files/documents/html.ts | 9 +++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/api/src/files/documents/html.spec.ts b/packages/api/src/files/documents/html.spec.ts index ddd445df25..5ce71fc6fb 100644 --- a/packages/api/src/files/documents/html.spec.ts +++ b/packages/api/src/files/documents/html.spec.ts @@ -499,6 +499,13 @@ describe('Office HTML producers', () => { * dark bg so a short deck (single slide) never reveals a * "white below" gap below the slides. */ expect(html).toContain('min-height: 100vh'); + /* Negative assertion: turning the body itself into a flex + * container caused pptx-preview's slides to render as black + * rectangles (manual e2e regression on PR #12934). The + * library's internal layout assumes block flow on its + * ancestor elements; the bg-fill effect must come from + * `min-height` alone, not from `body { display: flex }`. */ + expect(html).not.toMatch(/body\s*\{[^}]*display:\s*flex/); /* Container is hidden during render and revealed by the * `finalize` step so the unscaled flash never reaches the * user. */ diff --git a/packages/api/src/files/documents/html.ts b/packages/api/src/files/documents/html.ts index 11dfa72409..538108d363 100644 --- a/packages/api/src/files/documents/html.ts +++ b/packages/api/src/files/documents/html.ts @@ -1076,11 +1076,12 @@ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); fon /* Body fills the iframe viewport vertically and inherits the dark bg * so even when total slide content is shorter than the panel (e.g. a * single-slide deck) the artifact card has no visible "white below" - * gap — DOCX flows naturally and never has this issue, but PPTX - * slides are fixed-aspect and don't grow with the panel. */ + * gap. We do NOT make body a flex container — pptx-preview's + * internal layout assumes block flow; turning body into a flex + * column made slide content render but stay invisible (manual e2e + * regression on PR #12934, "black screen for slides"). */ html, body { min-height: 100vh; } -body { display: flex; flex-direction: column; } -#lc-render { padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1 0 auto; } +#lc-render { padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* Each rendered slide is wrapped post-hoc by the bootstrap script in * an .lc-slide-wrap div with explicit width/height set inline. The * inner slide keeps its native pixel size and gets transformed via