From e22bd561696ec149bc8935196bdf7153a6d18bd3 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Sat, 30 May 2026 13:08:28 +0000
Subject: [PATCH] fix: form fields too tight - increased spacing and padding

- Input padding increased from 12px to 16px
- Label-to-input gap increased from 4px to 8px
- Form group spacing increased from 16px to 20px
- Buttons padding increased from 8px/16px to 12px/20px
- Login card padding increased for more breathing room
- Added .form-row with responsive flex gap layout
- Added .main-content class with generous padding
---
 static/css/style.css | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index a1e8af6..c075439 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -313,11 +313,15 @@ small, .text-sm {
 }
 
 .app-main {
-  padding: var(--space-4) 0 var(--space-8);
+  padding: var(--space-6) var(--space-4) var(--space-10);
   min-height: calc(100vh - var(--header-height));
   min-height: calc(100dvh - var(--header-height));
 }
 
+.main-content {
+  padding: var(--space-5) var(--space-4) var(--space-10);
+}
+
 /* --------------------------------------------------------------------------
    5. Cards
    -------------------------------------------------------------------------- */
@@ -369,9 +373,9 @@ small, .text-sm {
 /* Login card — centered single-column */
 .login-card {
   width: 100%;
-  max-width: 400px;
+  max-width: 420px;
   margin: var(--space-12) auto;
-  padding: var(--space-8) var(--space-6);
+  padding: var(--space-10) var(--space-8);
   border-radius: var(--radius-xl);
 }
 
@@ -501,7 +505,7 @@ small, .text-sm {
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
-  padding: var(--space-2) var(--space-4);
+  padding: var(--space-3) var(--space-5);
   font-family: inherit;
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
@@ -661,7 +665,7 @@ small, .text-sm {
    9. Form Inputs
    -------------------------------------------------------------------------- */
 .form-group {
-  margin-bottom: var(--space-4);
+  margin-bottom: var(--space-5);
 }
 
 .form-label {
@@ -669,7 +673,7 @@ small, .text-sm {
   font-size: var(--text-sm);
   font-weight: var(--font-medium);
   color: var(--color-text);
-  margin-bottom: var(--space-1);
+  margin-bottom: var(--space-2);
 }
 
 .form-label--required::after {
@@ -682,10 +686,10 @@ small, .text-sm {
 .form-textarea {
   display: block;
   width: 100%;
-  padding: var(--space-3) var(--space-3);
+  padding: var(--space-4) var(--space-4);
   font-family: inherit;
   font-size: var(--text-base);
-  line-height: var(--leading-normal);
+  line-height: var(--leading-relaxed);
   color: var(--color-text);
   background-color: var(--color-card);
   border: 1px solid var(--color-border);
@@ -733,6 +737,18 @@ small, .text-sm {
   color: var(--color-danger);
 }
 
+.form-row {
+  display: flex;
+  gap: var(--space-4);
+}
+
+@media (max-width: 480px) {
+  .form-row {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+}
+
 .form-textarea {
   min-height: 100px;
   resize: vertical;