update

ts_web/elements/viewer.ts

@@ -548,9 +548,8 @@ export class DeDocumentViewer extends DeesElement {
       this.zoomLevel = null;
       this.updateDisplayZoom();
     } else if (value === "fit-width") {
-      // Fit width will be handled by auto scaling
-      this.zoomLevel = null;
-      this.updateDisplayZoom();
+      // Calculate zoom to fit page width to viewport width
+      this.calculateFitWidth();
     } else if (value === "fit-page") {
       // Calculate zoom to fit entire page in viewport
       this.calculateFitPage();
@@ -583,6 +582,18 @@ export class DeDocumentViewer extends DeesElement {
     this.pageGap = parseInt((e.target as HTMLInputElement).value, 10);
   }
 
+  private calculateFitWidth(): void {
+    const viewport = this.shadowRoot?.querySelector(".viewport");
+    if (!viewport) return;
+
+    // Account for padding and scrollbar width
+    const viewportWidth = viewport.clientWidth - 32 - 16;
+    const scale = viewportWidth / plugins.shared.A4_WIDTH;
+
+    this.zoomLevel = Math.round(scale * 100);
+    this.displayZoom = this.zoomLevel;
+  }
+
   private calculateFitPage(): void {
     const viewport = this.shadowRoot?.querySelector(".viewport");
     if (!viewport) return;