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