update

ts_web/elements/viewer.ts

@@ -194,7 +194,7 @@ export class DeDocumentViewer extends DeesElement {
         color: var(--text-primary);
         font-size: 13px;
         font-weight: 500;
-        min-width: 80px;
+        width: 90px; /* Fixed width to prevent reflow - fits "Fit Width" */
         justify-content: space-between;
         transition: all 0.15s ease;
       }
@@ -322,6 +322,12 @@ export class DeDocumentViewer extends DeesElement {
         gap: 2px;
       }
 
+      .fit-buttons {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+      }
+
       .spacing-slider-container {
         display: flex;
         align-items: center;
@@ -413,6 +419,9 @@ export class DeDocumentViewer extends DeesElement {
       .zoom-slider-container {
         display: none;
       }
+      .fit-buttons {
+        display: none;
+      }
       .spacing-label {
         display: none;
       }
@@ -501,6 +510,29 @@ export class DeDocumentViewer extends DeesElement {
 
         <div class="controls__divider"></div>
 
+        <!-- Fit Buttons -->
+        <div class="fit-buttons">
+          <!-- Fit Width Button -->
+          <button
+            class="controls__button ${this.zoomMode === "fit-width" ? "controls__button--active" : ""}"
+            @click=${() => this.handleZoomPreset("fit-width")}
+            title="Fit Width"
+          >
+            <dees-icon icon="lucide:arrowLeftRight"></dees-icon>
+          </button>
+
+          <!-- Fit Page Button -->
+          <button
+            class="controls__button ${this.zoomMode === "fit-page" ? "controls__button--active" : ""}"
+            @click=${() => this.handleZoomPreset("fit-page")}
+            title="Fit Page"
+          >
+            <dees-icon icon="lucide:expand"></dees-icon>
+          </button>
+        </div>
+
+        <div class="controls__divider"></div>
+
         <!-- Zoom Slider -->
         <div class="zoom-slider-container">
           <input