From d7c59df225dc8fb445a9284836ebb14159f7dc6f Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 23 Mar 2026 09:53:31 +0100
Subject: [PATCH] Enhance FamilyView styles for improved layout and
 responsiveness: Adjust flex properties, grid configurations, and dimensions
 for better visual consistency. Implement new styles for lover candidate cards
 and family view to prevent overlap and ensure proper spacing across
 components.

---
 frontend/src/views/falukant/FamilyView.vue | 49 ++++++++++++++++++----
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/falukant/FamilyView.vue b/frontend/src/views/falukant/FamilyView.vue
index 594de2f..29b0809 100644
--- a/frontend/src/views/falukant/FamilyView.vue
+++ b/frontend/src/views/falukant/FamilyView.vue
@@ -832,6 +832,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
+/* Wie HouseView: AppContent setzt last-child auf flex:1 + min-height:0 — sonst können
+   Spalten/Karten schrumpfen und sich überlagern. */
+.family-view {
+    flex: 0 0 auto;
+    min-height: min-content;
+    width: 100%;
+}
+
 .family-layout {
     display: flex;
     gap: 20px;
@@ -957,12 +965,13 @@ export default {
 
 .lovers-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 14px;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
+    gap: 16px;
 }
 
 .lover-card {
     padding: 16px 18px;
+    min-width: 0;
 }
 
 .lover-card__header {
@@ -1027,16 +1036,18 @@ export default {
 
 .lover-candidates__grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 12px;
+    /* Pro Karte braucht es Platz für Infospalte + Select + Button (DE-Texte); 240px war zu schmal. */
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
+    gap: 16px;
     margin-top: 12px;
 }
 
 .lover-candidate-card {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    align-items: stretch;
     gap: 14px;
+    min-width: 0;
     padding: 14px 16px;
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
@@ -1047,6 +1058,13 @@ export default {
     display: flex;
     flex-direction: column;
     gap: 4px;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.lover-candidate-card__main strong {
+    overflow-wrap: anywhere;
+    word-break: break-word;
 }
 
 .lover-candidate-card__main span {
@@ -1058,7 +1076,24 @@ export default {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    min-width: 180px;
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+}
+
+@media (min-width: 520px) {
+    .lover-candidate-card {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+    }
+
+    .lover-candidate-card__actions {
+        width: auto;
+        min-width: 200px;
+        max-width: min(100%, 260px);
+    }
 }
 
 .lover-candidate-card__label {