From 33c52bcef8ccde22f9959238416d48b3fdf5f5c6 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Thu, 28 May 2026 23:37:20 +0200
Subject: [PATCH] Add signature panel and layout updates for ReportViewer

Enhanced `ReportViewer.razor` with a new layout structure:
- Added `receiver-page-layout` with `receiver-signature-panel` and `receiver-viewer-wrapper` for better organization.
- Introduced a button to export signed PDFs, conditionally enabled based on `SignatureApplied`.
- Added a `DxPopup` for capturing signatures with a "Close" button.

Updated `MainLayout.razor` to remove unnecessary padding from `<article>`.

Refined `app.css`:
- Defined styles for `receiver-page-layout`, `receiver-signature-panel`, and `receiver-viewer-wrapper` to improve layout flexibility.
- Adjusted `article` to use flexbox and ensure hidden overflow.
---
 .../Pages/ReportViewer.razor                  |  8 +++++++
 .../Shared/MainLayout.razor                   |  2 +-
 .../wwwroot/css/app.css                       | 22 +++++++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/EnvelopeGenerator.ReceiverUI/Pages/ReportViewer.razor b/EnvelopeGenerator.ReceiverUI/Pages/ReportViewer.razor
index b7a3a415..809ef757 100644
--- a/EnvelopeGenerator.ReceiverUI/Pages/ReportViewer.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/ReportViewer.razor
@@ -17,6 +17,9 @@
 <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
 <link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css" rel="stylesheet" />
 
+<div class="receiver-page-layout">
+
+<div class="receiver-signature-panel">
 <div class="card m-3">
     <div class="card-body">
         <h5 class="card-title">Unterschrift</h5>
@@ -38,6 +41,7 @@
         </div>
     </div>
 </div>
+</div>
 
 <DxPopup @bind-Visible="SignaturePopupVisible"
          HeaderText="Unterschrift erfassen"
@@ -114,9 +118,13 @@
     </FooterContentTemplate>
 </DxPopup>
 
+<div class="receiver-viewer-wrapper">
 @if(Report is not null) {
     <DxReportViewer @key="ViewerKey" @ref="reportViewer" Report="Report" RootCssClasses="w-100 h-100" />
 }
+</div>
+
+</div>
 
 @code {
     const string SignatureTabDraw = "draw";
diff --git a/EnvelopeGenerator.ReceiverUI/Shared/MainLayout.razor b/EnvelopeGenerator.ReceiverUI/Shared/MainLayout.razor
index 5cdff87e..c14b9ff2 100644
--- a/EnvelopeGenerator.ReceiverUI/Shared/MainLayout.razor
+++ b/EnvelopeGenerator.ReceiverUI/Shared/MainLayout.razor
@@ -7,7 +7,7 @@
             <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
         </div>
 
-        <article class="content px-4">
+        <article class="content">
             @Body
         </article>
     </main>
diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
index d3c8a997..aecfc78b 100644
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
@@ -12,6 +12,28 @@ html, body {
 
 article {
     height: calc(100vh - 70px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.receiver-page-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.receiver-signature-panel {
+    flex: 0 0 auto;
+}
+
+.receiver-viewer-wrapper {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
 }
 
 .valid.modified:not([type=checkbox]) {