From 181f7f4deccf59b1dd9565579ca89b95ae29cbf7 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Wed, 30 Sep 2026 15:58:51 +0200
Subject: [PATCH] Refine UI spacing and dimensions for compact layout

Reduced gaps, padding, and margins across various elements to create a more compact and visually streamlined layout. Adjusted `min-height`, `border-radius`, and `box-shadow` properties for toolbars and buttons to improve consistency. Updated dimensions and font sizes for value boxes and icons to align with the refined design. Applied similar adjustments for resizing states to maintain uniformity.
---
 .../wwwroot/css/envelope-viewer.css           | 57 +++++++++++--------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
index 1dbdcce8..c446b562 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
@@ -86,22 +86,22 @@
     margin: 0;
     display: grid;
     grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
-    gap: 0.75rem;
+    gap: 0.5rem;
     align-items: center;
     background: transparent;
 }
 
 .sender-image-toolbar__group {
-    min-height: 4.8rem;
+    min-height: 3.8rem;
     background: #ffffff;
     border: 1px solid #d6deef;
-    border-radius: 0.5rem;
-    padding: 0.6rem;
+    border-radius: 0.45rem;
+    padding: 0.38rem 0.48rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.3rem;
-    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
+    gap: 0.2rem;
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
 }
 
 .sender-image-toolbar__group--nav {
@@ -114,15 +114,15 @@
 
 .sender-image-toolbar__group--actions {
     justify-content: center;
-    gap: 0.45rem;
-    padding-inline: 0.75rem;
+    gap: 0.32rem;
+    padding-inline: 0.55rem;
 }
 
 .sender-image-toolbar__icon-btn {
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 2.1rem;
+    height: 2.1rem;
     border: 0;
-    border-radius: 0.45rem;
+    border-radius: 0.4rem;
     background: transparent;
     color: #1f2a44;
     display: inline-flex;
@@ -137,22 +137,27 @@
 }
 
 .sender-image-toolbar__icon-btn--caret {
-    width: 2.1rem;
+    width: 1.85rem;
+}
+
+.sender-image-toolbar__icon-btn svg {
+    width: 18px;
+    height: 18px;
 }
 
 .sender-image-toolbar__value-box {
-    min-width: 9rem;
-    height: 2.5rem;
+    min-width: 8.15rem;
+    height: 2.1rem;
     border: 1px solid #d5dceb;
-    border-radius: 0.45rem;
+    border-radius: 0.4rem;
     background: #f8fafc;
     display: inline-flex;
     align-items: center;
     justify-content: flex-start;
-    padding: 0 0.8rem;
+    padding: 0 0.65rem;
     color: #233252;
-    font-size: 1.1rem;
-    font-weight: 500;
+    font-size: 0.72rem;
+    font-weight: 600;
     letter-spacing: 0.01em;
 }
 
@@ -162,12 +167,12 @@
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
-    padding-top: 6.2rem;
+    padding-top: 5.15rem;
 }
 
 .sender-image-editor__native-preview {
     max-width: 980px;
-    margin: 6.2rem auto 1rem;
+    margin: 5.15rem auto 1rem;
     background: #ffffff;
     border: 1px solid #cbd5e1;
     border-radius: 10px;
@@ -1274,23 +1279,25 @@ body.resizing {
     grid-template-columns: 1fr;
     width: calc(100% - 1rem);
     top: 0.5rem;
+    gap: 0.4rem;
 }
 
 .sender-image-toolbar__group {
-    min-height: 3.9rem;
+    min-height: 3.4rem;
 }
 
 .sender-image-editor__pages {
-    padding-top: 12.2rem;
+    padding-top: 10.5rem;
 }
 
 .sender-image-editor__native-preview {
-    margin-top: 12.2rem;
+    margin-top: 10.5rem;
 }
 
 .sender-image-toolbar__value-box {
-    min-width: 7.5rem;
-    font-size: 1rem;
+    min-width: 6.9rem;
+    height: 1.95rem;
+    font-size: 0.68rem;
 }
 
 .pdf-thumbnails {