cclohmar/NextExpense
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: form fields too tight - increased spacing and padding

Browse source 
- 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
This commit is contained in:
Claus Lohmar 2026-05-30 13:08:28 +00:00
parent 67f5ed5624
commit e22bd56169
1 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
static/css/style.css
View file

@ -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;