diff --git a/Web App/web/src/views/Dashboard.vue b/Web App/web/src/views/Dashboard.vue
index f5a5b66..14be535 100644
--- a/Web App/web/src/views/Dashboard.vue	
+++ b/Web App/web/src/views/Dashboard.vue	
@@ -175,7 +175,12 @@ onMounted(() => {
       }}<strong class="text-strong">{{ t("dashboard.addCar") }}</strong>{{ tSplit("dashboard.empty", "action").after }}
     </div>
 
-    <div v-else class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+    <!-- A card carries a name, a badge naming two service triggers and four
+         readings, so the column count follows from the width a card needs
+         rather than from breakpoints: three of them fit the 1024px shell at
+         328px each, which truncates the name and wraps the badge mid-phrase.
+         min() so a phone, narrower than one track, still gets a single column. -->
+    <div v-else class="grid gap-5 grid-cols-[repeat(auto-fill,minmax(min(24rem,100%),1fr))]">
       <RouterLink
         v-for="car in cars"
         :key="car.id"
@@ -199,7 +204,10 @@ onMounted(() => {
             <h2 class="truncate text-lg font-bold tracking-[-0.02em] text-strong">{{ car.name }}</h2>
             <p class="truncate text-xs text-muted">{{ [car.make, car.model, car.year || ''].filter(Boolean).join(' ') }}</p>
           </div>
-          <span :class="serviceStatus(car.latest, car).classes">
+          <!-- Never broken mid-phrase: with two triggers the label reads
+               "OK · 353d · 13.612 km", and a wrap puts the unit on its own
+               line. The name beside it truncates instead. -->
+          <span class="whitespace-nowrap" :class="serviceStatus(car.latest, car).classes">
             {{ serviceStatus(car.latest, car).label }}
           </span>
         </div>