Fix responsiveness

vigilcare-records-web/src/views/QueueDashboardView.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="h-full min-h-0 flex flex-col">
-    <AppHeader title="Queue Dashboard">
+    <AppHeader
+      title="Queue Dashboard"
+      description="Supervisor view of digitization backlog, aging work, and reject rate."
+    >
       <template #actions>
         <button
           type="button"
@@ -15,15 +18,6 @@
 
     <div class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
       <div class="max-w-7xl mx-auto space-y-6 lg:space-y-8">
-        <div>
-          <h1 class="text-[1.75rem] font-semibold text-ink-strong leading-tight tracking-tight">
-            Queue Dashboard
-          </h1>
-          <p class="mt-1 text-sm text-ink-secondary">
-            Supervisor view of digitization backlog, aging work, and reject rate.
-          </p>
-        </div>
-
         <InlineError
           v-if="overviewError"
           title="Could not load queue overview"
@@ -34,7 +28,7 @@
         />
 
         <!-- Priority work metrics -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-3 sm:gap-4">
+        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-4">
           <div class="card-elevated">
             <p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
               Pending Entry
@@ -85,17 +79,15 @@
               {{ ((overview?.rejectRate ?? 0) * 100).toFixed(1) }}%
             </p>
           </div>
-        </div>
-
-        <!-- Secondary age metric -->
-        <div class="card-elevated max-w-md">
-          <p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
-            Average Time in Queue
-          </p>
-          <p class="mt-2 text-2xl font-bold tabular-nums text-ink-strong">
-            {{ formatMinutes(overview?.averageTimeInQueueMinutes ?? 0) }}
-          </p>
-          <p class="text-xs text-ink-secondary mt-2">Target: under 24 hours</p>
+          <div class="card-elevated">
+            <p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
+              Average Time in Queue
+            </p>
+            <p class="mt-2 text-3xl font-bold tabular-nums text-ink-strong">
+              {{ formatMinutes(overview?.averageTimeInQueueMinutes ?? 0) }}
+            </p>
+            <p class="text-xs text-ink-secondary mt-2">Target: under 24 hours</p>
+          </div>
         </div>
 
         <!-- Status breakdown from overview.statusCounts -->
@@ -113,18 +105,18 @@
             <div
               v-for="{ status, count } in statusEntries"
               :key="status"
-              class="flex items-center gap-3 sm:gap-4"
+              class="flex items-center gap-2 sm:gap-4 min-w-0"
             >
-              <div class="w-44 shrink-0">
+              <div class="w-[7.5rem] sm:w-44 shrink-0 min-w-0">
                 <StatusBadge :status="status" />
               </div>
-              <div class="flex-1 h-2.5 rounded-full bg-canvas border border-line overflow-hidden">
+              <div class="flex-1 min-w-0 h-2.5 rounded-full bg-canvas border border-line overflow-hidden">
                 <div
                   class="h-full rounded-full bg-primary-500"
                   :style="{ width: `${(count / maxCount) * 100}%` }"
                 />
               </div>
-              <span class="text-sm font-semibold tabular-nums text-ink-strong w-8 text-right">
+              <span class="text-sm font-semibold tabular-nums text-ink-strong w-6 sm:w-8 text-right shrink-0">
                 {{ count }}
               </span>
             </div>