From cbdcdd4b96d7fcb468ad49330a01abb6dce5c02b Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Mon, 4 May 2026 16:32:24 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20fix:=20DOCX=20preview=20fills=20?=
 =?UTF-8?q?the=20artifact=20panel=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 packages/api/src/files/documents/html.ts | 28 +++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/api/src/files/documents/html.ts b/packages/api/src/files/documents/html.ts
index bf88550f2c..e073b71ccc 100644
--- a/packages/api/src/files/documents/html.ts
+++ b/packages/api/src/files/documents/html.ts
@@ -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,