Refactor backend CORS settings to include default origins and improve error handling in chat services: Introduce dynamic CORS origin handling, enhance RabbitMQ message sending with fallback mechanisms, and update WebSocket service to manage pending messages. Update UI components for better accessibility and responsiveness, including adjustments to dialog and navigation elements. Enhance styling for improved user experience across various components.

frontend/src/views/falukant/FamilyView.vue

@@ -3,7 +3,13 @@
         <StatusBar />
         <div class="contentscroll family-layout">
             <div class="family-content">
-            <h2>{{ $t('falukant.family.title') }}</h2>
+            <section class="family-hero surface-card">
+                <div>
+                    <span class="family-kicker">Familie</span>
+                    <h2>{{ $t('falukant.family.title') }}</h2>
+                    <p>Beziehungen, Kinder und familiäre Entwicklung in einer eigenen Spielweltansicht.</p>
+                </div>
+            </section>
 
             <div class="spouse-section">
                 <h3>{{ $t('falukant.family.spouse.title') }}</h3>
@@ -36,7 +42,7 @@
                                     <td>
                                         <div class="progress">
                                             <div class="progress-inner" :style="{
-                                                width: relationships[0].progress + '%',
+                                                width: normalizeWooingProgress(relationships[0].progress) + '%',
                                                 backgroundColor: progressColor(relationships[0].progress)
                                             }"></div>
                                         </div>
@@ -200,6 +206,8 @@ import Character3D from '@/components/Character3D.vue'
 import apiClient from '@/utils/axios.js'
 import { mapState } from 'vuex'
 
+const WOOING_PROGRESS_TARGET = 70
+
 export default {
     name: 'FamilyView',
     components: {
@@ -342,6 +350,8 @@ export default {
         },
 
         async cancelWooing() {
+            const confirmed = window.confirm(this.$t('falukant.family.spouse.wooing.cancelConfirm'));
+            if (!confirmed) return;
             try {
                 await apiClient.post('/api/falukant/family/cancel-wooing');
                 await this.loadFamilyData();
@@ -409,11 +419,16 @@ export default {
         },
 
         progressColor(p) {
-            const pct = Math.max(0, Math.min(100, p)) / 100;
+            const pct = this.normalizeWooingProgress(p) / 100;
             const red = Math.round(255 * (1 - pct));
             const green = Math.round(255 * pct);
             return `rgb(${red}, ${green}, 0)`;
         },
+        normalizeWooingProgress(p) {
+            const raw = Number(p) || 0
+            const normalized = (raw / WOOING_PROGRESS_TARGET) * 100
+            return Math.max(0, Math.min(100, normalized))
+        },
 
         jumpToPartyForm() {
             this.$router.push({
@@ -469,7 +484,33 @@ export default {
     display: flex;
     gap: 20px;
     align-items: flex-start;
-    padding-top: 24px;
+    padding-top: 0;
+}
+
+.family-hero {
+    padding: 24px 26px;
+    margin-bottom: 16px;
+    background:
+        radial-gradient(circle at top right, rgba(248, 162, 43, 0.16), transparent 28%),
+        linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(247, 238, 224, 0.98) 100%);
+}
+
+.family-kicker {
+    display: inline-block;
+    margin-bottom: 10px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(248, 162, 43, 0.14);
+    color: #8a5411;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.family-hero p {
+    margin: 0;
+    color: var(--color-text-secondary);
 }
 
 .self-character-3d {
@@ -483,15 +524,20 @@ export default {
 
 .family-content {
     flex: 1;
+    max-width: var(--content-max-width);
+    margin: 0 auto;
+    padding-bottom: 24px;
 }
 
 .spouse-section,
 .children-section,
 .lovers-section {
-    border: 1px solid #ccc;
-    margin: 10px 0;
-    border-radius: 4px;
-    padding: 10px;
+    border: 1px solid var(--color-border);
+    margin: 12px 0;
+    border-radius: var(--radius-lg);
+    padding: 16px;
+    background: rgba(255, 252, 247, 0.86);
+    box-shadow: var(--shadow-soft);
 }
 
 .relationship-container {
@@ -513,8 +559,8 @@ export default {
 .partner-character-3d {
     width: 200px;
     height: 280px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
     background-color: #fdf1db;
     flex-shrink: 0;
 }
@@ -537,8 +583,8 @@ export default {
 .child-character-3d {
     width: 200px;
     height: 280px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
     background-color: #fdf1db;
     flex-shrink: 0;
 }
@@ -597,10 +643,6 @@ export default {
     width: 50px;
 }
 
-h2 {
-    padding-top: 20px;
-}
-
 .relationship>table,
 .relationship>ul {
     display: inline-block;
@@ -648,4 +690,11 @@ h2 {
 .set-heir-button:hover {
     background-color: #218838;
 }
-</style>
+
+@media (max-width: 960px) {
+    .relationship-row,
+    .children-container {
+        flex-direction: column;
+    }
+}
+</style>