Hacker-Software
/
minmal-file-cloud-email-pim-passmanager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(contacts): Inputs in .field-row fuellen Container, kein Ueberlappen mehr 

Anrede/Suffix/PLZ etc. hatten max-width-Container, das InputText darin
behielt aber die Default-Breite und ueberlief. Globale CSS-Regel sorgt
nun dafuer, dass jedes Input/Select seinen Field-Container ausfuellt.
field-row wrappt auf schmalen Dialogen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Stefan Hacker 2026-04-13 09:32:17 +02:00
parent e02c4f97c1
commit 848e4b9b0f
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/views/ContactsView.vue
View File

@ -737,8 +737,14 @@ watch(selectedBookId, loadContacts)
.contact-name small { color: var(--p-text-muted-color); font-size: 0.75rem; } .contact-name small { color: var(--p-text-muted-color); font-size: 0.75rem; }
.field { margin-bottom: 0.75rem; } .field { margin-bottom: 0.75rem; }
.field label { display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem; } .field label { display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem; }
.field-row { display: flex; gap: 0.75rem; align-items: flex-end; } .field-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.field-row .field { flex: 1; margin-bottom: 0.75rem; } .field-row .field { flex: 1 1 140px; margin-bottom: 0.75rem; min-width: 0; }
/* Inputs/Selects sollen ihren Field-Container fuellen, damit feste
max-width-Felder (Anrede, Suffix, PLZ, ...) nicht ueberlaufen. */
.field :deep(.p-inputtext),
.field :deep(input.p-inputtext),
.field :deep(.p-select) { width: 100%; }
.multi-row :deep(.p-select) { width: 120px; flex-shrink: 0; }
.photo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .photo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.multi-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; } .multi-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.address-card { border: 1px solid var(--p-surface-200); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.75rem; } .address-card { border: 1px solid var(--p-surface-200); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.75rem; }