fix styling to be more responsive and clean

vigilcare-dashboard/src/components/ward/PatientCard.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from 'vue'
+import Badge from '@/components/ui/Badge.vue'
+
+const props = defineProps({ patient: { type: Object, required: true } })
+
+const riskVariant = computed(() => {
+  const score = props.patient.news2Score ?? 0
+  if (score >= 7) return 'critical'
+  if (score >= 5) return 'warning'
+  return 'success'
+})
+</script>
+
+<template>
+  <article
+    class="cursor-pointer rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition duration-200 hover:border-gray-300 hover:shadow-md active:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:active:bg-gray-800"
+  >
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+            Room {{ patient.room ?? '—' }}
+          </span>
+          <Badge v-if="patient.sepsisActive" variant="critical" size="xs">Sepsis</Badge>
+        </div>
+        <h3 class="mt-2 truncate text-base font-semibold text-gray-900 dark:text-white">
+          {{ patient.firstName }} {{ patient.lastName }}
+        </h3>
+        <p class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</p>
+      </div>
+      <Badge :variant="riskVariant">NEWS2 {{ patient.news2Score ?? '—' }}</Badge>
+    </div>
+
+    <dl class="mt-4 grid grid-cols-2 gap-4 border-t border-gray-100 pt-4 dark:border-gray-800">
+      <div>
+        <dt class="text-xs text-gray-500 dark:text-gray-400">qSOFA</dt>
+        <dd class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
+          {{ patient.qsofaScore ?? '—' }}
+        </dd>
+      </div>
+      <div>
+        <dt class="text-xs text-gray-500 dark:text-gray-400">Open alerts</dt>
+        <dd class="mt-2">
+          <Badge v-if="patient.openAlertCount > 0" :variant="patient.openAlertCount > 2 ? 'critical' : 'warning'">
+            {{ patient.openAlertCount }}
+          </Badge>
+          <span v-else class="text-sm text-gray-400">0</span>
+        </dd>
+      </div>
+    </dl>
+  </article>
+</template>

vigilcare-dashboard/src/components/ward/PatientRow.vue

@@ -14,26 +14,26 @@ const riskVariant = computed(() => {
 
 <template>
   <tr>
-    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+    <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-700 dark:text-gray-300">
       {{ patient.room ?? '—' }}
     </td>
-    <td class="px-4 py-3">
+    <td class="px-4 py-4">
       <div class="text-sm font-medium text-gray-900 dark:text-white">
         {{ patient.firstName }} {{ patient.lastName }}
       </div>
       <div class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</div>
     </td>
-    <td class="whitespace-nowrap px-4 py-3 text-right">
+    <td class="whitespace-nowrap px-4 py-4 text-right">
       <Badge :variant="riskVariant">{{ patient.news2Score ?? '—' }}</Badge>
     </td>
-    <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-gray-700 dark:text-gray-300">
+    <td class="whitespace-nowrap px-4 py-4 text-right text-sm text-gray-700 dark:text-gray-300">
       {{ patient.qsofaScore ?? '—' }}
     </td>
-    <td class="whitespace-nowrap px-4 py-3">
+    <td class="whitespace-nowrap px-4 py-4">
       <Badge v-if="patient.sepsisActive" variant="critical">Active</Badge>
       <span v-else class="text-sm text-gray-400">No</span>
     </td>
-    <td class="whitespace-nowrap px-4 py-3">
+    <td class="whitespace-nowrap px-4 py-4">
       <Badge v-if="patient.openAlertCount > 0" :variant="patient.openAlertCount > 2 ? 'critical' : 'warning'">
         {{ patient.openAlertCount }}
       </Badge>

vigilcare-dashboard/src/components/ward/WardTable.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useRouter } from 'vue-router'
 import PatientRow from './PatientRow.vue'
+import PatientCard from './PatientCard.vue'
 
 defineProps({ patients: { type: Array, required: true } })
 const router = useRouter()
@@ -11,16 +12,27 @@ function goToPatient(encounterId) {
 </script>
 
 <template>
-  <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+  <!-- Mobile: card list -->
+  <div class="space-y-4 md:hidden">
+    <PatientCard
+      v-for="patient in patients"
+      :key="patient.encounterId"
+      :patient="patient"
+      @click="goToPatient(patient.encounterId)"
+    />
+  </div>
+
+  <!-- Desktop: scrollable table -->
+  <div class="hidden overflow-x-auto rounded-lg border border-gray-200 md:block dark:border-gray-700">
     <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
       <thead class="sticky top-0 bg-gray-50 dark:bg-gray-800">
         <tr>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Room</th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Patient</th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">NEWS2</th>
-          <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">qSOFA</th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Sepsis</th>
-          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Alerts</th>
+          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Room</th>
+          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Patient</th>
+          <th class="px-4 py-4 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">NEWS2</th>
+          <th class="px-4 py-4 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">qSOFA</th>
+          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Sepsis</th>
+          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Alerts</th>
         </tr>
       </thead>
       <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
@@ -28,10 +40,10 @@ function goToPatient(encounterId) {
           v-for="patient in patients"
           :key="patient.encounterId"
           :patient="patient"
-          class="cursor-pointer transition duration-150 hover:bg-gray-50 dark:hover:bg-gray-800"
+          class="cursor-pointer transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-800"
           @click="goToPatient(patient.encounterId)"
         />
       </tbody>
     </table>
   </div>
-</template>
+</template>