From 789861999cdc2a5d35801be952064a5a6d38b13b 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;
 }