fix styling to be more responsive and clean

vigilcare-dashboard/src/components/alerts/AlertCard.vue

@@ -34,7 +34,7 @@ function formatTime(iso) {
 
 <template>
   <Card>
-    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+  <div class="flex flex-col gap-4 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">
           <Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge>
@@ -43,7 +43,7 @@ function formatTime(iso) {
         <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
           {{ alertTypeLabel(alert.alertType) }}
         </h3>
-        <p v-if="alert.details" class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        <p v-if="alert.details" class="mt-2 text-sm text-gray-600 dark:text-gray-400">
           {{ alert.details }}
         </p>
         <p class="mt-2 text-xs text-gray-500 dark:text-gray-500">
@@ -51,7 +51,7 @@ function formatTime(iso) {
         </p>
       </div>
 
-      <div v-if="showActions(alert.status)" class="flex shrink-0 gap-2">
+      <div v-if="showActions(alert.status)" class="flex w-full shrink-0 gap-2 sm:w-auto">
         <Button
           v-if="canAcknowledge(alert.status)"
           size="sm"