From aa6293d3468dd6879415e14b91a4a815b6e8a6c1 Mon Sep 17 00:00:00 2001
From: "Jan-Peter v. Hunnius" <jan@hunnius.net>
Date: Fri, 5 Jun 2026 20:37:17 +0200
Subject: [PATCH] refactor: display status items as three cards in a row

---
 src/views/DashboardView.vue | 36 ++++++++++++++----------------------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 72a3839..6449276 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -65,7 +65,7 @@ const aliveCount = computed(() => telemetry.feeds.filter((f) => f.health === 'al
         </span>
       </div>
 
-      <div class="status-grid">
+      <div class="grid grid-3">
         <!-- API Server -->
         <div class="status-item">
           <span class="status-icon" :class="telemetry.connected ? 'status-ok' : 'status-err'">
@@ -220,28 +220,19 @@ const aliveCount = computed(() => telemetry.feeds.filter((f) => f.health === 'al
   background: var(--color-surface-hover);
 }
 
-.status-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
 .status-item {
   display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.5rem 0;
-}
-
-.status-item + .status-item {
-  border-top: 1px solid var(--color-border);
-  padding-top: 0.75rem;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
 }
 
 .status-icon {
-  font-size: 1.2rem;
-  line-height: 1.3;
-  flex-shrink: 0;
+  font-size: 1.4rem;
+  line-height: 1;
 }
 
 .status-ok { color: var(--color-success); }
@@ -252,21 +243,22 @@ const aliveCount = computed(() => telemetry.feeds.filter((f) => f.health === 'al
 .status-detail {
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.25rem;
   min-width: 0;
 }
 
 .status-name {
   font-weight: 600;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
 .status-info {
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.35rem;
   flex-wrap: wrap;
+  color: var(--color-text-secondary);
 }
 
 .update-info {