From 95961a296f7425338638961a78732d6b2363385b Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Wed, 30 Sep 2026 15:52:46 +0200
Subject: [PATCH] Refactor SenderPdfImageEditor layout and styles

Refactored `SenderPdfImageEditor.razor` to improve readability and maintainability by introducing a new wrapper element (`sender-image-editor-shell`) and reorganizing the toolbar into a sticky container (`sender-image-editor__toolbar-host`). Updated conditional rendering logic to handle `PageCount` cases more effectively.

Enhanced styles in `envelope-viewer.css`:
- Added `.sender-image-editor-shell` for layout structure.
- Made toolbar sticky with `.sender-image-editor__toolbar-host`.
- Improved alignment, spacing, and responsiveness of elements.
- Adjusted padding and margins for better layout consistency.

These changes improve user experience and maintainability.
---
 .../PdfEditor/SenderPdfImageEditor.razor      | 40 ++++++++++---------
 .../wwwroot/css/envelope-viewer.css           | 36 ++++++++++++++++-
 2 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
index 6605b52a..738babe8 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor
@@ -5,25 +5,28 @@
 @inject IStringLocalizer<Resource> UiLocalizer
 @inject IJSRuntime JSRuntime
 
-@if (PageCount > 0)
-{
-    <SenderPdfImageEditorToolbar CurrentPage="1"
-                                TotalPages="@PageCount"
-                                ZoomPercent="112" />
-}
-
-<div class="pdf-editor-wrapper sender-image-editor sender-editor-pdf-viewer"
-     style="cursor: @(IsPlacementMode ? "crosshair" : (_isDragging ? "grabbing" : "default"));"
-     @onclick="HandleClickAsync"
-     @onmousemove="OnEditorMouseMoveAsync"
-     @onmouseup="OnEditorMouseUp"
-     @onmouseleave="OnEditorMouseUp">
-    @if (PageCount <= 0)
+<div class="sender-image-editor-shell">
+    @if (PageCount > 0)
     {
-        <div class="sender-image-editor__empty">@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")</div>
+        <div class="sender-image-editor__toolbar-host">
+            <SenderPdfImageEditorToolbar CurrentPage="1"
+                                        TotalPages="@PageCount"
+                                        ZoomPercent="112" />
+        </div>
     }
-    else
-    {
+
+    <div class="pdf-editor-wrapper sender-image-editor sender-editor-pdf-viewer"
+         style="cursor: @(IsPlacementMode ? "crosshair" : (_isDragging ? "grabbing" : "default"));"
+         @onclick="HandleClickAsync"
+         @onmousemove="OnEditorMouseMoveAsync"
+         @onmouseup="OnEditorMouseUp"
+         @onmouseleave="OnEditorMouseUp">
+        @if (PageCount <= 0)
+        {
+            <div class="sender-image-editor__empty">@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")</div>
+        }
+        else
+        {
         @if (Pages.Count == 0 && !string.IsNullOrWhiteSpace(PdfDataUrl))
         {
             <div class="sender-image-editor__native-preview">
@@ -85,7 +88,8 @@
                 </div>
             }
         </div>
-    }
+        }
+    </div>
 </div>
 
 @code {
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
index 6ada127b..1dbdcce8 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
@@ -61,13 +61,34 @@
     padding: 1rem;
 }
 
+.sender-image-editor-shell {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.sender-image-editor__toolbar-host {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    height: 0;
+    pointer-events: none;
+}
+
 .sender-image-toolbar {
+    pointer-events: auto;
+    position: absolute;
+    top: 0.75rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - 2rem);
     max-width: 980px;
-    margin: 0 auto 1rem;
+    margin: 0;
     display: grid;
     grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
     gap: 0.75rem;
     align-items: center;
+    background: transparent;
 }
 
 .sender-image-toolbar__group {
@@ -141,11 +162,12 @@
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
+    padding-top: 6.2rem;
 }
 
 .sender-image-editor__native-preview {
     max-width: 980px;
-    margin: 0 auto 1rem;
+    margin: 6.2rem auto 1rem;
     background: #ffffff;
     border: 1px solid #cbd5e1;
     border-radius: 10px;
@@ -1250,12 +1272,22 @@ body.resizing {
 
 .sender-image-toolbar {
     grid-template-columns: 1fr;
+    width: calc(100% - 1rem);
+    top: 0.5rem;
 }
 
 .sender-image-toolbar__group {
     min-height: 3.9rem;
 }
 
+.sender-image-editor__pages {
+    padding-top: 12.2rem;
+}
+
+.sender-image-editor__native-preview {
+    margin-top: 12.2rem;
+}
+
 .sender-image-toolbar__value-box {
     min-width: 7.5rem;
     font-size: 1rem;