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 @@ {{ pos.region.name }}
@@ -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; }