🩹 fix: revert body flex on PPTX bootstrap (caused black-screen render)

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.)
This commit is contained in:
Danny Avila 2026-05-04 19:11:54 -04:00
parent 355dce7820
commit a13bc5a782
2 changed files with 12 additions and 4 deletions

View file

@ -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. */

View file

@ -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