From e063df5cbe90bf582e809ca76e171a9753386e91 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 2 Apr 2026 16:09:52 +0200
Subject: [PATCH] refactor(PoliticsView): enhance UI layout and styling for
 political information display

- Improved the layout of the political information section by introducing a structured row format for better readability.
- Updated CSS styles to enhance the visual hierarchy and alignment of labels and values, ensuring a more user-friendly interface.
- Adjusted the display of benefits and term end information to provide clearer context and organization within the PoliticsView component.
---
 frontend/src/views/falukant/PoliticsView.vue | 93 ++++++++++++++------
 1 file changed, 68 insertions(+), 25 deletions(-)

diff --git a/frontend/src/views/falukant/PoliticsView.vue b/frontend/src/views/falukant/PoliticsView.vue
index 3da72d1..c73aeea 100644
--- a/frontend/src/views/falukant/PoliticsView.vue
+++ b/frontend/src/views/falukant/PoliticsView.vue
@@ -16,28 +16,37 @@
                             <span>{{ pos.region.name }}</span>
                         </div>
                         <div class="politics-card__meta">
-                            <span>
-                                {{ $t('falukant.politics.current.holder') }}:
-                                <template v-if="pos.character">
-                                    {{ pos.character.definedFirstName.name }} {{ pos.character.definedLastName.name }}
-                                </template>
-                                <template v-else>—</template>
-                            </span>
-                            <span>
-                                {{ $t('falukant.politics.current.benefit') }}:
-                                <template v-if="politicsBenefitItems(pos).length">
-                                    <template v-for="(b, i) in politicsBenefitItems(pos)" :key="i">
-                                        <span>{{ formatPoliticsBenefitItem(b) }}</span>
-                                        <span v-if="i < politicsBenefitItems(pos).length - 1">, </span>
+                            <div class="politics-card__meta-row">
+                                <span class="politics-card__meta-label">{{ $t('falukant.politics.current.holder') }}:</span>
+                                <span class="politics-card__meta-value">
+                                    <template v-if="pos.character">
+                                        {{ pos.character.definedFirstName.name }} {{ pos.character.definedLastName.name }}
                                     </template>
-                                </template>
-                                <template v-else>—</template>
-                            </span>
-                            <span>
-                                {{ $t('falukant.politics.current.termEnds') }}:
-                                <template v-if="pos.termEnds">{{ formatDate(pos.termEnds) }}</template>
-                                <template v-else>—</template>
-                            </span>
+                                    <template v-else>—</template>
+                                </span>
+                            </div>
+                            <div class="politics-card__meta-row politics-card__meta-row--benefits">
+                                <span class="politics-card__meta-label">{{ $t('falukant.politics.current.benefit') }}:</span>
+                                <ul
+                                    v-if="politicsBenefitItems(pos).length"
+                                    class="politics-benefit-list"
+                                >
+                                    <li
+                                        v-for="(b, i) in politicsBenefitItems(pos)"
+                                        :key="i"
+                                    >
+                                        {{ formatPoliticsBenefitItem(b) }}
+                                    </li>
+                                </ul>
+                                <span v-else class="politics-card__meta-value">—</span>
+                            </div>
+                            <div class="politics-card__meta-row">
+                                <span class="politics-card__meta-label">{{ $t('falukant.politics.current.termEnds') }}:</span>
+                                <span class="politics-card__meta-value">
+                                    <template v-if="pos.termEnds">{{ formatDate(pos.termEnds) }}</template>
+                                    <template v-else>—</template>
+                                </span>
+                            </div>
                         </div>
                     </article>
                 </div>
@@ -680,11 +689,46 @@ export default {
 
 .politics-card__meta {
     display: flex;
-    flex-wrap: wrap;
-    gap: 8px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
     color: var(--color-text-secondary);
 }
 
+.politics-card__meta-row {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    width: 100%;
+}
+
+.politics-card__meta-label {
+    font-weight: 600;
+    color: var(--color-text-muted, var(--color-text-secondary));
+}
+
+.politics-card__meta-value {
+    line-height: 1.45;
+}
+
+.politics-benefit-list {
+    margin: 0;
+    padding-left: 1.25rem;
+    line-height: 1.5;
+    list-style: disc;
+}
+
+.politics-benefit-list li {
+    margin: 0.2em 0;
+    padding-inline-start: 0.15em;
+}
+
+.politics-card__meta-row--benefits .politics-benefit-list {
+    width: 100%;
+    max-width: 100%;
+}
+
 .politics-card__checkbox {
     display: inline-flex;
     align-items: center;
@@ -720,8 +764,7 @@ export default {
 }
 
 @media (max-width: 900px) {
-    .politics-card__header,
-    .politics-card__meta {
+    .politics-card__header {
         flex-direction: column;
         align-items: flex-start;
     }