From 66013a696c60cc4dff60c5e8a99dc713939fa014 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 29 Jan 2026 11:58:15 +0100
Subject: [PATCH] Refactor StatusBar component: Improve status item rendering
 by enhancing icon and label display, and update CSS for better alignment and
 styling. This change enhances the visual clarity and user experience of the
 status bar.

---
 .../src/components/falukant/StatusBar.vue     | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/falukant/StatusBar.vue b/frontend/src/components/falukant/StatusBar.vue
index e2427f5..e3bb0be 100644
--- a/frontend/src/components/falukant/StatusBar.vue
+++ b/frontend/src/components/falukant/StatusBar.vue
@@ -5,19 +5,22 @@
             <img src="/images/icons/falukant/messages24.png" class="menu-icon" />
         </div>
         <template v-for="item in statusItems" :key="item.key">
-            <div class="status-item" v-if="item.value !== null && item.image == null" :title="$t(`falukant.statusbar.${item.key}`)">
-                <span class="status-icon">
+            <div class="status-item" v-if="item.value !== null && item.image == null">
+                <span class="status-icon-wrapper">
                     <template v-if="item.iconImage">
-                        <img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" />:
+                        <img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" :title="String(item.value)" />
                     </template>
                     <template v-else>
-                        {{ item.icon }}:
+                        <span class="status-icon-symbol" :title="String(item.value)">{{ item.icon }}</span>
                     </template>
-                    {{ item.value }}
                 </span>
+                <span class="status-label" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.value }}</span>
             </div>
-            <div class="status-item" v-else-if="item.image !== null" :title="$t(`falukant.statusbar.${item.key}`)">
-                <span class="status-icon">{{ item.icon }}:</span> <img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" />
+            <div class="status-item" v-else-if="item.image !== null">
+                <span class="status-icon-wrapper">
+                    <span class="status-icon-symbol" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.icon }}</span>
+                </span>
+                <img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" :title="$t(`falukant.statusbar.${item.key}`)" />
             </div>
         </template>
         <span v-if="statusItems.length > 0 && menu.falukant && menu.falukant.children">
@@ -199,7 +202,17 @@ export default {
     align-items: center;
 }
 
-.status-icon {
+.status-icon-wrapper {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 4px;
+}
+
+.status-icon-symbol {
+    font-size: 14px;
+}
+
+.status-label {
     font-size: 14px;
 }