From 822ac5984bef9172bd270348fe761409fd804785 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;
 }