From c344efa511dcdd5db89631c248d6023dd71c915c Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 29 Apr 2026 00:44:27 +0200
Subject: [PATCH] fix(app): equal-height KPI cards on dashboard and form
 failures

- Stretch row + flex column cards so tiles share height
- Form failures: uniform outlined cards; primary border for selection
  (replacing elevated vs outlined mismatch)
- Full-width state toggle with flex-grow buttons and wrap to fix overlap
- Responsive KPI columns sm6/lg3 for Form failures

Made-with: Cursor
---
 .../form-failures/FormFailuresTable.vue       | 73 +++++++++++--------
 apps/app/src/pages/dashboard/index.vue        |  7 +-
 2 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/apps/app/src/components/form-failures/FormFailuresTable.vue b/apps/app/src/components/form-failures/FormFailuresTable.vue
index bc43f7d7..0111932d 100644
--- a/apps/app/src/components/form-failures/FormFailuresTable.vue
+++ b/apps/app/src/components/form-failures/FormFailuresTable.vue
@@ -130,22 +130,28 @@ function setStateFilter(s: FormFailureState | 'all') {
 <template>
   <div>
     <!-- KPI tiles — server-side aggregate (sessie 3c). -->
-    <VRow class="mb-4">
+    <VRow
+      class="mb-4"
+      align="stretch"
+    >
       <VCol
         cols="12"
-        md="3"
+        sm="6"
+        lg="3"
+        class="d-flex"
       >
         <VCard
           density="compact"
-          class="cursor-pointer"
-          :variant="stateFilter === 'open' ? 'elevated' : 'outlined'"
+          variant="outlined"
+          class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
+          :class="stateFilter === 'open' ? 'border-opacity-100 border-primary' : ''"
           @click="setStateFilter('open')"
         >
-          <VCardText>
-            <p class="text-caption text-disabled mb-1">
+          <VCardText class="flex-grow-1 d-flex flex-column justify-center">
+            <p class="text-caption text-disabled mb-1 text-no-wrap">
               Open failures
             </p>
-            <h5 class="text-h5">
+            <h5 class="text-h5 mb-0 d-flex align-center">
               <VIcon
                 icon="tabler-alert-triangle"
                 color="error"
@@ -159,19 +165,22 @@ function setStateFilter(s: FormFailureState | 'all') {
       </VCol>
       <VCol
         cols="12"
-        md="3"
+        sm="6"
+        lg="3"
+        class="d-flex"
       >
         <VCard
           density="compact"
-          class="cursor-pointer"
-          :variant="stateFilter === 'resolved' ? 'elevated' : 'outlined'"
+          variant="outlined"
+          class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
+          :class="stateFilter === 'resolved' ? 'border-opacity-100 border-primary' : ''"
           @click="setStateFilter('resolved')"
         >
-          <VCardText>
-            <p class="text-caption text-disabled mb-1">
+          <VCardText class="flex-grow-1 d-flex flex-column justify-center">
+            <p class="text-caption text-disabled mb-1 text-no-wrap">
               Opgelost (30d)
             </p>
-            <h5 class="text-h5">
+            <h5 class="text-h5 mb-0 d-flex align-center">
               <VIcon
                 icon="tabler-check"
                 color="success"
@@ -185,19 +194,22 @@ function setStateFilter(s: FormFailureState | 'all') {
       </VCol>
       <VCol
         cols="12"
-        md="3"
+        sm="6"
+        lg="3"
+        class="d-flex"
       >
         <VCard
           density="compact"
-          class="cursor-pointer"
-          :variant="stateFilter === 'dismissed' ? 'elevated' : 'outlined'"
+          variant="outlined"
+          class="flex-grow-1 w-100 cursor-pointer d-flex flex-column"
+          :class="stateFilter === 'dismissed' ? 'border-opacity-100 border-primary' : ''"
           @click="setStateFilter('dismissed')"
         >
-          <VCardText>
-            <p class="text-caption text-disabled mb-1">
+          <VCardText class="flex-grow-1 d-flex flex-column justify-center">
+            <p class="text-caption text-disabled mb-1 text-no-wrap">
               Dismissed (30d)
             </p>
-            <h5 class="text-h5">
+            <h5 class="text-h5 mb-0 d-flex align-center">
               <VIcon
                 icon="tabler-x"
                 color="warning"
@@ -211,17 +223,20 @@ function setStateFilter(s: FormFailureState | 'all') {
       </VCol>
       <VCol
         cols="12"
-        md="3"
+        sm="6"
+        lg="3"
+        class="d-flex"
       >
         <VCard
           density="compact"
           variant="outlined"
+          class="flex-grow-1 w-100 d-flex flex-column"
         >
-          <VCardText>
-            <p class="text-caption text-disabled mb-1">
+          <VCardText class="flex-grow-1 d-flex flex-column justify-center">
+            <p class="text-caption text-disabled mb-1 text-no-wrap">
               Submissions
             </p>
-            <h5 class="text-h5">
+            <h5 class="text-h5 mb-0 d-flex align-center">
               <VIcon
                 icon="tabler-chart-bar"
                 color="info"
@@ -254,12 +269,10 @@ function setStateFilter(s: FormFailureState | 'all') {
     <VCard>
       <VCardText>
         <VRow>
-          <VCol
-            cols="12"
-            md="6"
-          >
+          <VCol cols="12">
             <VBtnToggle
               :model-value="stateFilter"
+              class="w-100 flex-wrap"
               divided
               density="comfortable"
               mandatory
@@ -269,14 +282,16 @@ function setStateFilter(s: FormFailureState | 'all') {
                 v-for="opt in stateOptions"
                 :key="opt.value"
                 :value="opt.value"
+                class="flex-grow-1"
+                style="min-inline-size: 0"
               >
-                {{ opt.title }}
+                <span class="text-truncate">{{ opt.title }}</span>
               </VBtn>
             </VBtnToggle>
           </VCol>
           <VCol
             cols="12"
-            md="6"
+            md="12"
           >
             <AppTextField
               v-model="search"
diff --git a/apps/app/src/pages/dashboard/index.vue b/apps/app/src/pages/dashboard/index.vue
index e12e9f87..de17c290 100644
--- a/apps/app/src/pages/dashboard/index.vue
+++ b/apps/app/src/pages/dashboard/index.vue
@@ -24,16 +24,17 @@ const stats = [
       </VCardText>
     </VCard>
 
-    <VRow>
+    <VRow align="stretch">
       <VCol
         v-for="stat in stats"
         :key="stat.title"
         cols="12"
         sm="6"
         md="3"
+        class="d-flex"
       >
-        <VCard>
-          <VCardText class="d-flex align-center gap-x-4">
+        <VCard class="flex-grow-1 w-100 d-flex flex-column">
+          <VCardText class="d-flex align-center gap-x-4 flex-grow-1">
             <VAvatar
               :color="stat.color"
               variant="tonal"