refactor(test-app): simplify System Status section layout

Replaced StatusCard components with simpler inline list layout:
- Removed card bounding boxes and side padding
- Added horizontal dividers between status items
- Title and value on same line using grid layout (left/right justified)
- Reduced padding and margins for more compact display
- Removed unused StatusCard import

test-apps/daily-notification-test/src/views/HomeView.vue

@@ -82,33 +82,40 @@
     <!-- System Status -->
     <div class="system-status">
       <h2 class="section-title">System Status</h2>
-      <div class="status-grid">
-        <StatusCard
-          v-for="item in systemStatus"
+      <div class="status-list">
+        <div
+          v-for="(item, index) in systemStatus"
           :key="item.label"
-          :title="item.label"
-          :status="getStatusType(item.status)"
-          :value="item.value"
-          :description="getStatusDescription(item.label)"
-          @refresh="refreshSystemStatus"
-        />
+          class="status-item"
+          :class="`status-${getStatusType(item.status)}`"
+        >
+          <div class="status-row">
+            <span class="status-label">{{ item.label }}</span>
+            <span class="status-value" :class="`value-${getStatusType(item.status)}`">
+              {{ item.value }}
+            </span>
+          </div>
+          <hr v-if="index < systemStatus.length - 1" class="status-divider" />
+        </div>
       </div>
       
       <!-- Diagnostic Actions -->
       <div class="section">
         <h2 class="section-title">🔧 Diagnostics</h2>
-        <ActionCard
-          title="Plugin Diagnostics"
-          description="Check plugin loading and availability"
-          button-text="Run Diagnostics"
-          @click="runPluginDiagnostics"
-        />
-        <ActionCard
-          title="View Console Logs"
-          description="Open browser console for detailed logs"
-          button-text="Open Console"
-          @click="openConsole"
-        />
+        <div class="action-grid">
+          <ActionCard
+            title="Plugin Diagnostics"
+            description="Check plugin loading and availability"
+            button-text="Run Diagnostics"
+            @click="runPluginDiagnostics"
+          />
+          <ActionCard
+            title="View Console Logs"
+            description="Open browser console for detailed logs"
+            button-text="Open Console"
+            @click="openConsole"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -119,7 +126,6 @@ import { computed, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAppStore } from '@/stores/app'
 import ActionCard from '@/components/cards/ActionCard.vue'
-import StatusCard from '@/components/cards/StatusCard.vue'
 import { Capacitor } from '@capacitor/core'
 import { DailyNotification } from '@timesafari/daily-notification-plugin'
 import { TEST_USER_ZERO_CONFIG, generateEndorserJWT } from '@/config/test-user-zero'
@@ -724,11 +730,64 @@ onMounted(async () => {
 }
 
 .system-status {
-  margin-bottom: 40px;
+  margin-bottom: 32px;
+}
+
+.status-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-bottom: 32px;
+}
+
+.status-item {
+  padding: 12px 0;
+}
+
+.status-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.status-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.status-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.value-success {
+  color: #4caf50;
+}
+
+.value-warning {
+  color: #ff9800;
+}
+
+.value-error {
+  color: #f44336;
+}
+
+.value-info {
+  color: #2196f3;
+}
+
+.status-divider {
+  margin: 0;
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  margin-top: 12px;
 }
 
 .section {
-  margin-bottom: 30px;
+  margin-bottom: 24px;
 }
 
 /* Mobile responsiveness */