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 { .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(100vh - var(--header-height));
min-height: calc(100dvh - var(--header-height)); min-height: calc(100dvh - var(--header-height));
} }
.main-content {
padding: var(--space-5) var(--space-4) var(--space-10);
}
/* -------------------------------------------------------------------------- /* --------------------------------------------------------------------------
5. Cards 5. Cards
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
@ -369,9 +373,9 @@ small, .text-sm {
/* Login card — centered single-column */ /* Login card — centered single-column */
.login-card { .login-card {
width: 100%; width: 100%;
max-width: 400px; max-width: 420px;
margin: var(--space-12) auto; margin: var(--space-12) auto;
padding: var(--space-8) var(--space-6); padding: var(--space-10) var(--space-8);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
@ -501,7 +505,7 @@ small, .text-sm {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--space-2); gap: var(--space-2);
padding: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5);
font-family: inherit; font-family: inherit;
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: var(--font-medium); font-weight: var(--font-medium);
@ -661,7 +665,7 @@ small, .text-sm {
9. Form Inputs 9. Form Inputs
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
.form-group { .form-group {
margin-bottom: var(--space-4); margin-bottom: var(--space-5);
} }
.form-label { .form-label {
@ -669,7 +673,7 @@ small, .text-sm {
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: var(--font-medium); font-weight: var(--font-medium);
color: var(--color-text); color: var(--color-text);
margin-bottom: var(--space-1); margin-bottom: var(--space-2);
} }
.form-label--required::after { .form-label--required::after {
@ -682,10 +686,10 @@ small, .text-sm {
.form-textarea { .form-textarea {
display: block; display: block;
width: 100%; width: 100%;
padding: var(--space-3) var(--space-3); padding: var(--space-4) var(--space-4);
font-family: inherit; font-family: inherit;
font-size: var(--text-base); font-size: var(--text-base);
line-height: var(--leading-normal); line-height: var(--leading-relaxed);
color: var(--color-text); color: var(--color-text);
background-color: var(--color-card); background-color: var(--color-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
@ -733,6 +737,18 @@ small, .text-sm {
color: var(--color-danger); 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 { .form-textarea {
min-height: 100px; min-height: 100px;
resize: vertical; resize: vertical;