fix styling to be more responsive and clean

vigilcare-dashboard/src/components/patient/AlertsList.vue

@@ -41,7 +41,7 @@ async function resolve(alertId) {
 <template>
   <Card>
     <template #header>
-      <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
         Active Alerts
       </h2>
     </template>
@@ -51,7 +51,7 @@ async function resolve(alertId) {
       <li
         v-for="alert in alerts"
         :key="alert.id"
-        class="flex items-start justify-between gap-3 py-3 first:pt-0 last:pb-0"
+        class="flex flex-col gap-4 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between"
       >
         <div class="min-w-0 flex-1">
           <div class="flex flex-wrap items-center gap-2">
@@ -60,7 +60,7 @@ async function resolve(alertId) {
               {{ alertTypeLabel(alert.alertType) }}
             </span>
           </div>
-          <p v-if="alert.details" class="mt-1 truncate text-xs text-gray-500 dark:text-gray-400">
+          <p v-if="alert.details" class="mt-2 truncate text-xs text-gray-500 dark:text-gray-400">
             {{ alert.details }}
           </p>
         </div>