From c18f0b7fb18676af0110f5b0163b6f0ddd09e74c Mon Sep 17 00:00:00 2001
From: Anatolii Grynchuk <anatolii.grynchuk@ZabuLink.onmicrosoft.com>
Date: Wed, 13 May 2026 02:11:59 +0300
Subject: [PATCH] refactor: update admin CSS for improved layout and
 readability

- Switch `.template-preview-variables` to grid layout for better responsiveness.
- Adjust form label font size and spacing for consistency.
- Enhance styles of `.form-control-sm` for improved usability.
---
 .../wwwroot/css/admin.css                     | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/HrynCo.NotificationService.Web/wwwroot/css/admin.css b/HrynCo.NotificationService.Web/wwwroot/css/admin.css
index eb8a068..f02c088 100644
--- a/HrynCo.NotificationService.Web/wwwroot/css/admin.css
+++ b/HrynCo.NotificationService.Web/wwwroot/css/admin.css
@@ -235,14 +235,26 @@ body {
 }
 
 .template-preview-variables {
-    display: flex;
-    flex-direction: column;
-    gap: .75rem;
-    max-width: 420px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: .75rem 1rem;
+    max-width: none;
+}
+
+.template-preview-variables > div {
+    margin-bottom: 0 !important;
+}
+
+.template-preview-variables .form-label {
+    font-size: .72rem;
+    margin-bottom: .2rem;
 }
 
 .template-preview-variables .form-control-sm {
     background: #fff;
+    min-height: calc(1.5em + .45rem + 2px);
+    padding: .2rem .45rem;
+    font-size: .82rem;
 }
 
 .template-preview-subject {