A garage card wide enough for the badge it carries

The service badge gained a second trigger in the last commit, so it now reads
"OK · 353d · 13.612 km" where it used to read "OK · 353d". On the garage card
there was nowhere to put the extra quantity. Three columns fit the 1024px shell
at 328px each, and at that width the badge wrapped with the unit alone on a
second line - a pill 44px tall reading "13.612" above "km" - while the name
beside it truncated to "Toyota bZ4X To...". The card had been sized for the
badge that used to be there.

The column count now follows from the width a card needs rather than from
breakpoints: an auto-fill track with a 24rem minimum, which the 1024px shell
answers with two columns of 502px. A desktop garage is therefore 2-up where it
was 3-up. That is the honest answer at this container width - the third column
was what squeezed both the name and the badge - and it is the change here most
worth disagreeing with, since it is visible on every garage and not only on the
cars with two triggers. min(24rem,100%) keeps a phone, narrower than one track,
on a single column rather than overflowing it.

The badge also stops wrapping outright. Its label is a phrase whose parts have
to stay together, and separating a number from its unit is the one break it
must not take. The name beside it truncates instead, which it was already
prepared to do - so on a phone, where a card is 271px, the badge stays whole
and the name gives way.

Verified in a browser against the real card: 328 -> 502px, the badge 44px over
two lines -> 24px on one, "Toyota bZ4X To..." -> "Toyota bZ4X Touring" in full,
and at 375px one column, no sideways scroll, badge still on a single line. npm
run build is clean and the compiled CSS carries both rules.

Not verified: no automated test covers this - the web app has no test runner, so
the widths above were measured by hand. The layout was checked with one car on
the screen; a garage of several was not, though the change is to the track
rather than to the card. The deployed Web App still serves the previous build
and will keep showing three narrow cards until it is redeployed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

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>