Redesign PDF toolbar with enhanced functionality

The PDF toolbar in `EnvelopeViewer.razor` has been redesigned to improve usability and functionality. Key changes include:

- Added buttons for page navigation, zooming, and preset zoom levels.
- Introduced a zoom slider and page input field for direct control.
- Added "Fit to Width" and "Set Zoom to 100%" features.
- Updated `ZoomIn` and `ZoomOut` methods with boundary checks.
- Added new methods: `SetZoom`, `OnZoomSliderChanged`, `OnPageInputChanged`, and `FitToWidth`.

Styling updates in `envelope-viewer.css` include a modernized toolbar design with rounded corners, shadows, and responsive layouts for smaller screens.

`pdf-viewer.js` was updated with `setScale` and `fitToWidth` methods to support the new functionality. These changes enhance the interactivity, flexibility, and user experience of the PDF viewer.

EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js

@@ -231,6 +231,31 @@ window.pdfViewer = {
         }
     },
 
+    setScale(scale) {
+        if (scale >= 0.5 && scale <= 3.0) {
+            this.scale = scale;
+            this.queueRenderPage(this.pageNum);
+        }
+    },
+
+    async fitToWidth() {
+        const container = this.canvas.closest('.pdf-frame');
+        if (!container || !this.pdfDoc) return;
+
+        try {
+            const page = await this.pdfDoc.getPage(this.pageNum);
+            const viewport = page.getViewport({ scale: 1.0 });
+            
+            const containerWidth = container.clientWidth - 80;
+            const optimalScale = containerWidth / viewport.width;
+            
+            this.scale = Math.min(Math.max(optimalScale, 0.5), 3.0);
+            this.queueRenderPage(this.pageNum);
+        } catch (error) {
+            console.error('Error fitting to width:', error);
+        }
+    },
+
     getCurrentPage() {
         return this.pageNum;
     },