🪟 fix: DOCX preview fills the artifact panel width

docx-preview defaults to rendering at the document's native page
width (8.5in for letter, 21cm for A4). In a wide artifact panel
that left whitespace on either side; in a narrow one it forced
horizontal scroll.

Two changes:
- Pass `ignoreWidth: true` to `docx.renderAsync` so the library skips
  the document's pageSize width and uses its container's width.
- Defensive CSS overrides on `.docx-wrapper` and `.docx-wrapper > section.docx`
  in case a future library version regresses on the option, plus
  `padding: 0` on the wrapper to drop the page-edge whitespace
  docx-preview otherwise reserves.

`renderHeaders`/`renderFooters`/etc. stay enabled — those still
appear in the rendered output, just inside a container that fills
the panel instead of a fixed-width "page."

Tests unchanged (100/100); manual e2e ahead of merge.
This commit is contained in:
Danny Avila 2026-05-04 16:32:24 -04:00
parent 23749184a2
commit cbdcdd4b96

View file

@ -391,8 +391,25 @@ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); fon
/* docx-preview emits its own per-document <style> tags inside #lc-render
* — leave them be. These rules just keep the host frame consistent with
* dark mode and bound the rendered document width. */
#lc-render .docx-wrapper { background: transparent !important; }
#lc-render .docx { max-width: 100%; }
/* docx-preview wraps each section in .docx-wrapper and sets explicit
* inline width on .docx from the source pageSize. With ignoreWidth:true
* set on the renderer those inline widths are skipped, but we override
* defensively so the doc fills the artifact panel even if a future
* library version regresses. padding:0 on the wrapper drops the margin
* docx-preview otherwise reserves for page-edge whitespace. */
#lc-render .docx-wrapper {
background: transparent !important;
padding: 0 !important;
width: 100% !important;
}
#lc-render .docx-wrapper > section.docx {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
padding: 0 !important;
box-shadow: none !important;
margin: 0 0 1em 0 !important;
}
@media (prefers-color-scheme: dark) {
#lc-render .docx { color: var(--fg); }
}
@ -425,7 +442,12 @@ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); fon
docx.renderAsync(bytes.buffer, document.getElementById('lc-render'), null, {
className: 'docx',
inWrapper: true,
ignoreWidth: false,
/* ignoreWidth: true tells docx-preview to skip the document's
* native page width (8.5in / 21cm typically) and render at the
* iframe container's full width. Without this the rendered doc
* floats with whitespace on either side in a wide artifact
* panel — fine on letter-sized screens, ugly in our context. */
ignoreWidth: true,
ignoreHeight: false,
ignoreFonts: false,
breakPages: true,