From 848e4b9b0fc0adae51ab3329f399ae7d1ae3a4cb Mon Sep 17 00:00:00 2001 From: Stefan Hacker Date: Mon, 13 Apr 2026 09:32:17 +0200 Subject: [PATCH] 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) --- frontend/src/views/ContactsView.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/ContactsView.vue b/frontend/src/views/ContactsView.vue index 0d26754..97968ed 100644 --- a/frontend/src/views/ContactsView.vue +++ b/frontend/src/views/ContactsView.vue @@ -737,8 +737,14 @@ watch(selectedBookId, loadContacts) .contact-name small { color: var(--p-text-muted-color); font-size: 0.75rem; } .field { margin-bottom: 0.75rem; } .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 .field { flex: 1; margin-bottom: 0.75rem; } +.field-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; } +.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; } .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; }