fix(DeDocumentViewer): Account for toolbar and padding when calculating Fit Page zoom in viewer

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2025-12-11 - 2.0.6 - fix(DeDocumentViewer)
+Account for toolbar and padding when calculating Fit Page zoom in viewer
+
+- calculateFitPage now subtracts explicit top (toolbar + padding), bottom, and side paddings from viewport dimensions before computing scale.
+- This produces a more accurate zoom level for the Fit Page preset by considering toolbar height and page margins.
+
 ## 2025-12-11 - 2.0.2 - fix(page)
 Use theme variables for page styling, make pagecontainer background theme-aware, and use accent background for footer separator
 

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '2.0.2',
+  version: '2.0.6',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '2.0.2',
+  version: '2.0.6',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }

ts_web/elements/viewer.ts

@@ -739,8 +739,13 @@ export class DeDocumentViewer extends DeesElement {
     const viewport = this.shadowRoot?.querySelector(".viewport");
     if (!viewport) return;
 
-    const viewportHeight = viewport.clientHeight - 32; // Account for padding
-    const viewportWidth = viewport.clientWidth - 32;
+    // Account for padding: top = toolbar (40px) + 16px, bottom = 16px margin for visibility
+    const topPadding = 40 + 16; // toolbar height + padding
+    const bottomPadding = 16; // some margin at bottom
+    const sidePadding = 32; // 16px each side
+
+    const viewportHeight = viewport.clientHeight - topPadding - bottomPadding;
+    const viewportWidth = viewport.clientWidth - sidePadding;
 
     const scaleByHeight = viewportHeight / plugins.shared.A4_HEIGHT;
     const scaleByWidth = viewportWidth / plugins.shared.A4_WIDTH;