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.

HrynCo.NotificationService.Web/wwwroot/css/admin.css

@@ -235,14 +235,26 @@ body {
 }
 
 .template-preview-variables {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: .75rem;
+    gap: .75rem 1rem;
-    max-width: 420px;
+    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 {