fix styling to be more responsive and clean

vigilcare-dashboard/src/components/ui/Badge.vue

@@ -9,7 +9,7 @@ const props = defineProps({
 
 const classes = computed(() => {
   const base = 'inline-flex items-center font-medium rounded-full'
-  const sizes = { xs: 'px-1.5 py-0.5 text-xs', sm: 'px-2 py-0.5 text-xs', md: 'px-2.5 py-1 text-sm' }
+  const sizes = { xs: 'px-2 py-2 text-xs', sm: 'px-2 py-2 text-xs', md: 'px-4 py-2 text-sm' }
   const variants = {
     critical: 'bg-severity-critical/10 text-severity-critical dark:bg-severity-critical-dark/20 dark:text-red-300',
     warning:  'bg-severity-warning/10 text-severity-warning dark:bg-severity-warning-dark/20 dark:text-amber-300',

vigilcare-dashboard/src/components/ui/Button.vue

@@ -25,9 +25,9 @@ const classes = computed(() => {
   const base =
     'inline-flex items-center justify-center font-medium rounded-lg transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none'
   const sizes = {
-    sm: 'px-3 py-1.5 text-xs',
+    sm: 'px-4 py-2 text-xs',
     md: 'px-4 py-2 text-sm',
-    lg: 'px-5 py-2.5 text-base',
+    lg: 'px-6 py-2 text-base',
   }
   const variants = {
     primary:

vigilcare-dashboard/src/components/ui/Card.vue

@@ -15,9 +15,9 @@ const classes = computed(() => {
     'rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900'
   const paddings = {
     none: '',
-    sm: 'p-3',
+    sm: 'p-4',
     md: 'p-4',
-    lg: 'p-6',
+    lg: 'p-8',
   }
   return twMerge(base, paddings[props.padding])
 })

vigilcare-dashboard/src/components/ui/Modal.vue

@@ -15,10 +15,10 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
 
 <template>
   <Teleport to="body">
-    <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
+    <div v-if="open" class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center">
       <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" @click="$emit('close')" />
       <div ref="modalRef" role="dialog" aria-modal="true"
-           class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-lg dark:bg-gray-800">
+           class="relative z-10 max-h-[calc(100svh-2rem)] w-full max-w-md overflow-y-auto rounded-lg bg-white p-8 shadow-lg dark:bg-gray-800">
         <h2 v-if="title" class="mb-4 text-lg font-semibold dark:text-white">{{ title }}</h2>
         <slot />
       </div>

vigilcare-dashboard/src/components/ui/Skeleton.vue

@@ -5,7 +5,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="animate-pulse space-y-3" role="status" aria-label="Loading">
+  <div class="animate-pulse space-y-4" role="status" aria-label="Loading">
     <div
       v-for="n in rows"
       :key="n"