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,21 +82,27 @@
     <!-- System Status -->
     <div class="system-status">
       <h2 class="section-title">System Status</h2>
-      <div class="status-grid">
+      <div class="status-list">
-        <StatusCard
+        <div
-          v-for="item in systemStatus"
+          v-for="(item, index) in systemStatus"
           :key="item.label"
-          :title="item.label"
+          class="status-item"
-          :status="getStatusType(item.status)"
+          :class="`status-${getStatusType(item.status)}`"
-          :value="item.value"
+        >
-          :description="getStatusDescription(item.label)"
+          <div class="status-row">
-          @refresh="refreshSystemStatus"
+            <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>
+        <div class="action-grid">
           <ActionCard
             title="Plugin Diagnostics"
             description="Check plugin loading and availability"
@@ -112,6 +118,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -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 */