Improve PDF toolbar layout and rendering logic

Updated `envelope-viewer.css` to enhance the layout and responsiveness of the PDF toolbar:
- Adjusted padding, gap, width, and alignment for better usability.
- Improved zoom section and slider styles for flexibility and consistency.

Enhanced `pdf-viewer.js` to handle concurrent rendering tasks:
- Added checks to prevent overlapping render tasks on the same canvas.
- Implemented error handling for rendering operations to ensure stability.

These changes improve the user experience and robustness of the PDF viewer.

EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css

@@ -216,17 +216,18 @@ body.resizing {
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(20px);
     border-radius: 12px;
-    padding: 0.75rem 1.25rem;
+    padding: 0.75rem 1.75rem;
     display: flex;
     align-items: center;
-    gap: 1rem;
+    justify-content: space-between;
+    gap: 2rem;
     box-shadow: 
         0 4px 16px rgba(0, 0, 0, 0.1),
         0 0 0 1px rgba(126, 34, 206, 0.1);
     border: 1px solid rgba(126, 34, 206, 0.15);
     flex-shrink: 0;
-    max-width: 95%;
+    width: 90%;
-    width: fit-content;
+    max-width: 1200px;
 }
 
 .pdf-toolbar__section {
@@ -237,6 +238,9 @@ body.resizing {
 
 .pdf-toolbar__zoom-section {
     gap: 0.75rem;
+    flex: 1;
+    max-width: 500px;
+    justify-content: center;
 }
 
 .pdf-toolbar__divider {
@@ -336,7 +340,9 @@ body.resizing {
 
 .pdf-toolbar__zoom-slider {
     -webkit-appearance: none;
-    width: 140px;
+    width: 100%;
+    min-width: 240px;
+    max-width: 450px;
     height: 6px;
     border-radius: 3px;
     background: linear-gradient(90deg, 
@@ -490,16 +496,22 @@ body.resizing {
 .pdf-toolbar {
     flex-wrap: wrap;
     padding: 0.625rem 1rem;
-    gap: 0.625rem;
+    gap: 0.75rem;
-    max-width: 98%;
+    width: 98%;
+    justify-content: center;
 }
 
 .pdf-toolbar__divider {
     display: none;
 }
 
+.pdf-toolbar__zoom-section {
+    width: 100%;
+    max-width: 100%;
+}
+
 .pdf-toolbar__zoom-slider {
-    width: 100px;
+    min-width: 150px;
 }
 
 .pdf-toolbar__btn--preset {

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

@@ -303,6 +303,15 @@ window.pdfViewer = {
                 return;
             }
 
+            // Check if canvas is already being used by a render task
+            if (canvas._renderTask) {
+                try {
+                    await canvas._renderTask;
+                } catch (e) {
+                    // Ignore cancellation errors
+                }
+            }
+
             const page = await this.pdfDoc.getPage(pageNum);
             
             // High-quality rendering with HiDPI support (configurable)
@@ -333,7 +342,14 @@ window.pdfViewer = {
                 viewport: viewport
             };
 
-            await page.render(renderContext).promise;
+            // Store render task on canvas to track active renders
+            const renderTask = page.render(renderContext);
+            canvas._renderTask = renderTask.promise;
+            
+            await renderTask.promise;
+            
+            // Clear the task when done
+            delete canvas._renderTask;
         } catch (error) {
             console.error('Error rendering thumbnail', pageNum, ':', error);
         }