From 4ae422499242240dae82e1c8eacd476df2f560b6 Mon Sep 17 00:00:00 2001
From: Jos Nienhuis <6952249+joszz@users.noreply.github.com>
Date: Sat, 10 Oct 2026 22:06:07 +0200
Subject: [PATCH 1/3] fix(ui): even out spacing and card titles across the
 views

- Every card heading uses .card-title (statistics charts and the trip
  sidebar gain an icon), replacing three look-alike title classes.
- Statistics chart cards take the 1.25rem card padding and 1.5rem
  section spacing; the trip log totals follow the status grid.
- Page subtitles share .view-subtitle, tucked under the title.
- The maintenance detail modal uses the shared modal sections.
- Phones keep one 0.75rem gutter for content, topbar and footer; the
  extra-small breakpoint that shrank it is gone.
- Form controls inherit the page font from one global rule; small
  buttons get side padding; radii settle on 6px for controls.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/assets/carDiagram.css            |  12 --
 frontend/src/assets/login.css                 |   1 -
 frontend/src/assets/main.css                  |  73 ++++-----
 frontend/src/assets/maintenance.css           |   7 -
 frontend/src/assets/map.css                   |   9 +-
 frontend/src/assets/statistics.css            |   8 +-
 frontend/src/assets/tripLog.css               |  10 +-
 frontend/src/components/CarDiagram.vue        |   2 +-
 frontend/src/components/LocationMapWidget.vue |   2 +-
 .../components/MaintenanceItemDetailModal.vue | 146 +++++++++---------
 frontend/src/components/SkeletonChart.vue     |   4 +-
 frontend/src/components/StatsChartCard.vue    |   6 +-
 frontend/src/components/map/TripSidebar.vue   |   5 +-
 frontend/src/views/ClimateSchedulesView.vue   |   2 +-
 frontend/src/views/MaintenanceView.vue        |   2 +-
 frontend/src/views/StatisticsView.vue         |   7 +-
 frontend/src/views/TripLogView.vue            |   2 +-
 17 files changed, 144 insertions(+), 154 deletions(-)

diff --git a/frontend/src/assets/carDiagram.css b/frontend/src/assets/carDiagram.css
index 22ce9294..cb737f4a 100644
--- a/frontend/src/assets/carDiagram.css
+++ b/frontend/src/assets/carDiagram.css
@@ -129,18 +129,6 @@
   }
 }
 
-.tyre-diagram__title {
-  font-size: 0.85rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
 .tyre-diagram__wrap {
   display: flex;
   align-items: center;
diff --git a/frontend/src/assets/login.css b/frontend/src/assets/login.css
index 69c3c935..f100a9bf 100644
--- a/frontend/src/assets/login.css
+++ b/frontend/src/assets/login.css
@@ -88,7 +88,6 @@
   font-size: 0.9rem;
   padding: 0.65rem 0.75rem 0.65rem 2.25rem;
   transition: border-color 0.15s;
-  font-family: inherit;
 }
 
 .login-field__input:focus {
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 44cdf05d..9c14d413 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -61,6 +61,15 @@
 /* Firefox */
 * {
   scrollbar-width: thin;
+/* Form controls take the system font from the browser rather than the page (Arial on Windows),
+   so every button, field and select would otherwise set itself apart from the text around it. */
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+}
+
   scrollbar-color: var(--color-border) transparent;
 }
 
@@ -202,7 +211,9 @@ body,
   color: var(--color-primary);
   text-decoration: none;
   margin-bottom: 2rem;
-  padding-left: 0.5rem;
+
+  /* The nav links' own inline padding, so the logo sits in the same column as their icons. */
+  padding-left: 0.75rem;
 }
 
 .sidebar-nav {
@@ -276,6 +287,12 @@ body,
 .text-success {
   color: var(--color-success);
 }
+/* A line about the page, tucked under its title rather than spaced like a section of its own. */
+.view-subtitle {
+  margin-top: -1rem;
+  margin-bottom: 1.5rem;
+}
+
 
 .text-danger {
   color: var(--color-danger);
@@ -548,7 +565,6 @@ body,
 /* A row that leads somewhere else: the whole row is the button. */
 .detail-list__item--link {
   width: 100%;
-  font-family: inherit;
   color: var(--color-text);
   text-align: left;
   cursor: pointer;
@@ -639,17 +655,7 @@ body,
   }
 }
 
-/* ── Card component ───────────────────────────────────────── */
-
-.card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-}
-
-.card-body {
-  padding: 1rem 1.25rem;
-}
+/* ── Card title ───────────────────────────────────────────── */
 
 .card-title {
   font-size: 0.85rem;
@@ -657,7 +663,7 @@ body,
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin-bottom: 0.75rem;
+  margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -665,6 +671,8 @@ body,
 
 /* ── Leaflet map chrome ───────────────────────────────────── */
 
+/* The heading of every card that has one (overview, location, trip history, the statistics
+   charts): small muted capitals with the card's icon in front. */
 /* Leaflet ships a light-only frame: a pale grey canvas, white zoom buttons, white popups and a
    white attribution strip. Over the vector basemap, which follows the theme, those read as holes
    punched in the map, so the chrome is re-pointed at the theme tokens and now follows dark and
@@ -1021,7 +1029,7 @@ body,
 
 .btn-sm {
   font-size: 0.78rem;
-  padding: 0.3rem;
+  padding: 0.3rem 0.6rem;
 }
 
 .btn-primary {
@@ -1169,6 +1177,11 @@ body,
 
 .form-control {
   width: 100%;
+/* A button in the stack keeps its own width instead of stretching into a bar across the form. */
+.form-stack > .btn {
+  align-self: flex-start;
+}
+
   padding: 0.4rem 0.6rem;
   font-size: 0.85rem;
   border-radius: 6px;
@@ -1179,7 +1192,6 @@ body,
 
 textarea.form-control {
   resize: vertical;
-  font-family: inherit;
 }
 
 /* A time of day as selects (TimeOfDaySelect): hour and minute, plus AM or PM on a 12-hour clock. */
@@ -1896,11 +1908,17 @@ textarea.form-control {
 
   .main-content {
     padding: 0.75rem;
+  /* The same gutter as the topbar, so the page title and cards line up under the menu button and
+     the footer under both. */
     overflow-x: hidden;
   }
 
   /* Icon sits flush at button left so it aligns with card left edge */
   .hamburger {
+  .app-footer {
+    padding: 0 0.75rem;
+  }
+
     justify-content: flex-start;
   }
 
@@ -1933,22 +1951,6 @@ textarea.form-control {
   }
 }
 
-/* ── Very small phones (< 400px) ─────────────────────────── */
-
-@media (width <= 399px) {
-  .main-content {
-    padding: 0.5rem;
-  }
-
-  .status-grid {
-    gap: 0.4rem;
-  }
-
-  .status-card {
-    padding: 0.65rem 0.75rem;
-  }
-}
-
 /* ── Tablet (600–1023px) ──────────────────────────────────── */
 
 @media (width >= 600px) and (width <= 1023px) {
@@ -2261,7 +2263,8 @@ textarea.form-control {
   gap: 0.4rem;
 }
 
-.demo-panel-section {
+/* Between sections only, so the panel's padding is the same at the bottom as at the top. */
+.demo-panel-section:not(:last-child) {
   margin-bottom: 0.75rem;
 }
 
@@ -2283,7 +2286,7 @@ textarea.form-control {
 .demo-toggle-btn {
   padding: 0.25rem 0.6rem;
   font-size: 0.75rem;
-  border-radius: 4px;
+  border-radius: 6px;
   border: 1px solid var(--color-border);
   background-color: var(--color-surface-2);
   color: var(--color-text);
@@ -2334,7 +2337,7 @@ textarea.form-control {
   width: 100%;
   padding: 0.3rem 0.5rem;
   font-size: 0.8rem;
-  border-radius: 4px;
+  border-radius: 6px;
   border: 1px solid var(--color-border);
   background-color: var(--color-surface-2);
   color: var(--color-text);
diff --git a/frontend/src/assets/maintenance.css b/frontend/src/assets/maintenance.css
index 3bd37aec..a5200f60 100644
--- a/frontend/src/assets/maintenance.css
+++ b/frontend/src/assets/maintenance.css
@@ -13,13 +13,6 @@
   margin-bottom: 0.3rem;
 }
 
-.maintenance-detail__heading {
-  font-size: 0.85rem;
-  color: var(--color-text-muted);
-  margin-top: 1rem;
-  margin-bottom: 0.2rem;
-}
-
 .maintenance-log-form {
   gap: 0.6rem;
 }
diff --git a/frontend/src/assets/map.css b/frontend/src/assets/map.css
index b3f3c361..89ba1fec 100644
--- a/frontend/src/assets/map.css
+++ b/frontend/src/assets/map.css
@@ -53,12 +53,9 @@
   border-bottom: 1px solid var(--color-border);
 }
 
-.trip-sidebar__title {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+/* The header's border does the separating here, so the title keeps none of its own margin. */
+.trip-sidebar__header .trip-sidebar__title {
+  margin-bottom: 0;
 }
 
 .trip-list {
diff --git a/frontend/src/assets/statistics.css b/frontend/src/assets/statistics.css
index f912e777..65797893 100644
--- a/frontend/src/assets/statistics.css
+++ b/frontend/src/assets/statistics.css
@@ -5,12 +5,6 @@
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
-  padding: 1.5rem;
+  padding: 1.25rem;
   overflow: visible;
 }
-
-.chart-container h2 {
-  font-size: 1rem;
-  margin-bottom: 1rem;
-  color: var(--color-text-muted);
-}
diff --git a/frontend/src/assets/tripLog.css b/frontend/src/assets/tripLog.css
index aed45f53..3914913a 100644
--- a/frontend/src/assets/tripLog.css
+++ b/frontend/src/assets/tripLog.css
@@ -15,11 +15,13 @@
 
 /* ── Totals per purpose ───────────────────────────────────── */
 
+/* Spaced like the status grid it borrows its cards from, and set off from the trips below as the
+   dashboard and statistics set their summaries off from what follows. */
 .trip-log-totals {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.75rem;
-  margin-bottom: 1rem;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 /* ── Classify every unclassified trip at once ─────────────── */
@@ -32,7 +34,7 @@
   padding: 0.6rem 0.9rem;
   margin-bottom: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius);
   background: var(--color-surface);
 }
 
@@ -63,7 +65,7 @@
   align-items: center;
   padding: 0.75rem 0.9rem;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: var(--radius);
   background: var(--color-surface);
   transition: opacity 0.15s;
 }
diff --git a/frontend/src/components/CarDiagram.vue b/frontend/src/components/CarDiagram.vue
index 492fa806..5d5b7cc0 100644
--- a/frontend/src/components/CarDiagram.vue
+++ b/frontend/src/components/CarDiagram.vue
@@ -168,7 +168,7 @@ const motionBlurAmount = computed(() => {
       </div>
     </template>
     <div class="tyre-diagram">
-      <p class="tyre-diagram__title">
+      <p class="card-title">
         <font-awesome-icon icon="car-side" />
         {{ t('vehicle.overview') }}
       </p>
diff --git a/frontend/src/components/LocationMapWidget.vue b/frontend/src/components/LocationMapWidget.vue
index aba61dc0..2fe1f692 100644
--- a/frontend/src/components/LocationMapWidget.vue
+++ b/frontend/src/components/LocationMapWidget.vue
@@ -178,7 +178,7 @@ function openFullMap() {
 <template>
   <CardInfoWrap :title="t('vehicle.location')" :description="t('dashboard.cardDesc.location')">
     <div class="location-map-card">
-      <p class="tyre-diagram__title">
+      <p class="card-title">
         <font-awesome-icon icon="location-dot" />
         {{ t('vehicle.location') }}
       </p>
diff --git a/frontend/src/components/MaintenanceItemDetailModal.vue b/frontend/src/components/MaintenanceItemDetailModal.vue
index 703c1dba..178c0498 100644
--- a/frontend/src/components/MaintenanceItemDetailModal.vue
+++ b/frontend/src/components/MaintenanceItemDetailModal.vue
@@ -98,83 +98,89 @@ async function confirmDelete() {
     wide
     @close="emit('close')"
   >
-    <div v-if="currentItem" class="maintenance-detail">
-      <div class="maintenance-detail__summary">
-        <span
-          class="badge"
-          :class="`badge-${currentItem.dueStatus === 'dueSoon' ? 'warning' : currentItem.dueStatus === 'overdue' ? 'danger' : currentItem.dueStatus === 'ok' ? 'success' : 'secondary'}`"
-        >
-          {{ t(`maintenance.status.${currentItem.dueStatus}`) }}
-        </span>
-        <span class="text-muted text-sm">{{ formatIntervalSummary(currentItem, t, units) }}</span>
-      </div>
-
-      <p v-if="currentItem.nextDueOdometerKm != null" class="text-sm">
-        {{ t('maintenance.nextDueOdometer') }}:
-        {{ units.format('distance', currentItem.nextDueOdometerKm, ODOMETER_FORMAT) }}
-      </p>
-      <p v-if="currentItem.nextDueDate" class="text-sm">
-        {{ t('maintenance.nextDueDate') }}: {{ formatDate(currentItem.nextDueDate) }}
-      </p>
-      <p v-if="currentItem.notes" class="text-muted text-sm">{{ currentItem.notes }}</p>
-
-      <h4 class="maintenance-detail__heading">{{ t('maintenance.logService') }}</h4>
-      <form class="form-stack maintenance-log-form" @submit.prevent="submitLog">
-        <div class="form-row">
-          <div class="form-group">
-            <label for="log-performed-at">{{ t('maintenance.logForm.performedAt') }}</label>
-            <input id="log-performed-at" v-model="performedAt" type="date" class="form-control" />
+    <div v-if="currentItem">
+      <section class="detail-modal__section maintenance-detail">
+        <div class="maintenance-detail__summary">
+          <span
+            class="badge"
+            :class="`badge-${currentItem.dueStatus === 'dueSoon' ? 'warning' : currentItem.dueStatus === 'overdue' ? 'danger' : currentItem.dueStatus === 'ok' ? 'success' : 'secondary'}`"
+          >
+            {{ t(`maintenance.status.${currentItem.dueStatus}`) }}
+          </span>
+          <span class="text-muted text-sm">{{ formatIntervalSummary(currentItem, t, units) }}</span>
+        </div>
+
+        <p v-if="currentItem.nextDueOdometerKm != null" class="text-sm">
+          {{ t('maintenance.nextDueOdometer') }}:
+          {{ units.format('distance', currentItem.nextDueOdometerKm, ODOMETER_FORMAT) }}
+        </p>
+        <p v-if="currentItem.nextDueDate" class="text-sm">
+          {{ t('maintenance.nextDueDate') }}: {{ formatDate(currentItem.nextDueDate) }}
+        </p>
+        <p v-if="currentItem.notes" class="text-muted text-sm">{{ currentItem.notes }}</p>
+      </section>
+
+      <section class="detail-modal__section">
+        <h4 class="detail-modal__section-title">{{ t('maintenance.logService') }}</h4>
+        <form class="form-stack maintenance-log-form" @submit.prevent="submitLog">
+          <div class="form-row">
+            <div class="form-group">
+              <label for="log-performed-at">{{ t('maintenance.logForm.performedAt') }}</label>
+              <input id="log-performed-at" v-model="performedAt" type="date" class="form-control" />
+            </div>
+            <div class="form-group">
+              <label for="log-odometer">{{
+                t('maintenance.logForm.odometer', { unit: units.symbol('distance') })
+              }}</label>
+              <input
+                id="log-odometer"
+                v-model.number="odometer.shown"
+                type="number"
+                min="0"
+                class="form-control"
+              />
+            </div>
           </div>
           <div class="form-group">
-            <label for="log-odometer">{{
-              t('maintenance.logForm.odometer', { unit: units.symbol('distance') })
-            }}</label>
+            <label for="log-notes">{{ t('maintenance.logForm.notes') }}</label>
             <input
-              id="log-odometer"
-              v-model.number="odometer.shown"
-              type="number"
-              min="0"
+              id="log-notes"
+              v-model="logNotes"
+              type="text"
               class="form-control"
+              maxlength="1000"
             />
           </div>
-        </div>
-        <div class="form-group">
-          <label for="log-notes">{{ t('maintenance.logForm.notes') }}</label>
-          <input
-            id="log-notes"
-            v-model="logNotes"
-            type="text"
-            class="form-control"
-            maxlength="1000"
-          />
-        </div>
-        <p v-if="logError" class="text-danger text-sm">{{ logError }}</p>
-        <button type="submit" class="btn btn-primary btn-sm" :disabled="logSaving">
-          {{ t('maintenance.logForm.submit') }}
-        </button>
-      </form>
-
-      <h4 class="maintenance-detail__heading">{{ t('maintenance.history') }}</h4>
-      <p v-if="logEntries.length === 0" class="text-muted text-sm">
-        {{ t('maintenance.noHistory') }}
-      </p>
-      <ul v-else class="maintenance-history">
-        <li v-for="entry in logEntries" :key="entry.id" class="maintenance-history__row">
-          <span>{{ formatDate(entry.performedAt) }}</span>
-          <span v-if="entry.odometerKm != null" class="text-muted">
-            {{ units.format('distance', entry.odometerKm, ODOMETER_FORMAT) }}
-          </span>
-          <span v-if="entry.notes" class="text-muted">{{ entry.notes }}</span>
-          <button
-            type="button"
-            class="btn btn-sm btn-outline-secondary maintenance-history__delete"
-            :aria-label="t('maintenance.deleteLogEntry')"
-            @click="removeLogEntry(entry.id)"
-          >
-            <font-awesome-icon icon="trash" />
+          <p v-if="logError" class="text-danger text-sm">{{ logError }}</p>
+          <button type="submit" class="btn btn-primary btn-sm" :disabled="logSaving">
+            {{ t('maintenance.logForm.submit') }}
           </button>
-        </li>
-      </ul>
+        </form>
+      </section>
+
+      <section class="detail-modal__section">
+        <h4 class="detail-modal__section-title">{{ t('maintenance.history') }}</h4>
+        <p v-if="logEntries.length === 0" class="text-muted text-sm">
+          {{ t('maintenance.noHistory') }}
+        </p>
+        <ul v-else class="maintenance-history">
+          <li v-for="entry in logEntries" :key="entry.id" class="maintenance-history__row">
+            <span>{{ formatDate(entry.performedAt) }}</span>
+            <span v-if="entry.odometerKm != null" class="text-muted">
+              {{ units.format('distance', entry.odometerKm, ODOMETER_FORMAT) }}
+            </span>
+            <span v-if="entry.notes" class="text-muted">{{ entry.notes }}</span>
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-secondary maintenance-history__delete"
+              :aria-label="t('maintenance.deleteLogEntry')"
+              @click="removeLogEntry(entry.id)"
+            >
+              <font-awesome-icon icon="trash" />
+            </button>
+          </li>
+        </ul>
+      </section>
     </div>
 
     <template #footer>
diff --git a/frontend/src/components/SkeletonChart.vue b/frontend/src/components/SkeletonChart.vue
index 8453082a..a48203f4 100644
--- a/frontend/src/components/SkeletonChart.vue
+++ b/frontend/src/components/SkeletonChart.vue
@@ -6,9 +6,9 @@
 </template>
 
 <style scoped>
-/* Height matches h2 font-size (1rem) × base line-height (1.6) + same margin-bottom as .chart-container h2 */
+/* Stands in for the card title, the same way the overview and location skeletons do. */
 .chart-skel__title {
-  height: 1.6rem;
+  height: 0.85rem;
   margin-bottom: 1rem;
 }
 
diff --git a/frontend/src/components/StatsChartCard.vue b/frontend/src/components/StatsChartCard.vue
index d1904c98..8e975a04 100644
--- a/frontend/src/components/StatsChartCard.vue
+++ b/frontend/src/components/StatsChartCard.vue
@@ -39,6 +39,7 @@ ChartJS.register(
 
 defineProps<{
   title: string
+  icon: string
   type: StatsChartType
   data: ChartData<StatsChartType>
   options: ChartOptions<StatsChartType>
@@ -60,7 +61,10 @@ const { t } = useI18n()
     >
       <font-awesome-icon icon="circle-info" />
     </button>
-    <h2>{{ title }}</h2>
+    <h2 class="card-title">
+      <font-awesome-icon :icon="icon" />
+      {{ title }}
+    </h2>
     <Chart :type="type" :data="data" :options="options" />
   </div>
 </template>
diff --git a/frontend/src/components/map/TripSidebar.vue b/frontend/src/components/map/TripSidebar.vue
index f9546f22..a8544630 100644
--- a/frontend/src/components/map/TripSidebar.vue
+++ b/frontend/src/components/map/TripSidebar.vue
@@ -56,7 +56,10 @@ watch(
 <template>
   <aside ref="root" class="trip-sidebar">
     <div class="trip-sidebar__header">
-      <h2 class="trip-sidebar__title">{{ t('trips.title') }}</h2>
+      <h2 class="card-title trip-sidebar__title">
+        <font-awesome-icon icon="route" />
+        {{ t('trips.title') }}
+      </h2>
     </div>
 
     <div v-if="loading" class="trip-list">
diff --git a/frontend/src/views/ClimateSchedulesView.vue b/frontend/src/views/ClimateSchedulesView.vue
index 25b16487..5755d749 100644
--- a/frontend/src/views/ClimateSchedulesView.vue
+++ b/frontend/src/views/ClimateSchedulesView.vue
@@ -75,7 +75,7 @@ function variant(schedule: ClimateSchedule): 'info' | 'warning' | undefined {
       </div>
     </div>
 
-    <p class="text-muted mb-4">{{ t('climateSchedules.subtitle') }}</p>
+    <p class="text-muted view-subtitle">{{ t('climateSchedules.subtitle') }}</p>
 
     <div v-if="store.itemsError" class="empty-state text-danger">
       {{ errorMessage(store.itemsError) }}
diff --git a/frontend/src/views/MaintenanceView.vue b/frontend/src/views/MaintenanceView.vue
index 50c8075f..0cbaf43f 100644
--- a/frontend/src/views/MaintenanceView.vue
+++ b/frontend/src/views/MaintenanceView.vue
@@ -85,7 +85,7 @@ watch(vin, (v) => {
       </div>
     </div>
 
-    <p class="text-muted mb-4">{{ t('maintenance.subtitle') }}</p>
+    <p class="text-muted view-subtitle">{{ t('maintenance.subtitle') }}</p>
 
     <div v-if="store.itemsError" class="empty-state text-danger">
       {{ errorMessage(store.itemsError) }}
diff --git a/frontend/src/views/StatisticsView.vue b/frontend/src/views/StatisticsView.vue
index aeb24775..3eb7c8d1 100644
--- a/frontend/src/views/StatisticsView.vue
+++ b/frontend/src/views/StatisticsView.vue
@@ -435,6 +435,7 @@ const skeletonChartCount = computed(
               <StatsChartCard
                 v-if="chartDefMap.get(item.id)?.applicable && store.history.length"
                 :title="chartDefMap.get(item.id)!.title"
+                :icon="chartDefMap.get(item.id)!.icon"
                 :type="chartDefMap.get(item.id)!.type"
                 :data="chartDefMap.get(item.id)!.data"
                 :options="chartDefMap.get(item.id)!.options"
@@ -454,6 +455,7 @@ const skeletonChartCount = computed(
               <StatsChartCard
                 v-if="item.visible && def.applicable"
                 :title="def.title"
+                :icon="def.icon"
                 :type="def.type"
                 :data="def.data"
                 :options="def.options"
@@ -509,7 +511,7 @@ const skeletonChartCount = computed(
 .parking-modal-map {
   height: 280px;
   width: 100%;
-  border-radius: var(--radius-sm, 4px);
+  border-radius: var(--radius);
   overflow: hidden;
 }
 
@@ -520,7 +522,7 @@ const skeletonChartCount = computed(
 }
 
 .stats-insights {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 .stats-chart-grid {
@@ -542,7 +544,6 @@ const skeletonChartCount = computed(
 @media (width >= 992px) {
   .stats-chart-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 1.25rem;
   }
 }
 
diff --git a/frontend/src/views/TripLogView.vue b/frontend/src/views/TripLogView.vue
index c4668a59..b1e9406e 100644
--- a/frontend/src/views/TripLogView.vue
+++ b/frontend/src/views/TripLogView.vue
@@ -111,7 +111,7 @@ function exportCsv() {
       </div>
     </div>
 
-    <p class="text-muted mb-4">{{ t('tripLog.subtitle') }}</p>
+    <p class="text-muted view-subtitle">{{ t('tripLog.subtitle') }}</p>
 
     <div class="trip-log-filters">
       <label class="trip-log-filters__field">

From ce8d793565e9d49e4f2dbadb35378daf8e8abdaa Mon Sep 17 00:00:00 2001
From: Jos Nienhuis <6952249+joszz@users.noreply.github.com>
Date: Sat, 10 Oct 2026 22:06:16 +0200
Subject: [PATCH 2/3] fix(settings): native vehicle type select, one size for
 every field

The vehicle type override was the only settings choice on the
multiselect; it now uses SettingsSelect like the region and units, and
the detected type becomes a settings row of its own. The multiselect
stays for the map's fuel type and brand filters.

Native selects, text fields and the multiselect now share --field-*
tokens (padding, font size, line height, radius, focus ring). Native
selects draw the multiselect's caret and ring, form-select-sm is gone,
and the time-of-day selects use form-select instead of form-control.
The multiselect's inner wrapper counted the border twice and came out
2px taller; every field now measures the same 33.25px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/assets/main.css                  | 142 +++++++++---------
 frontend/src/components/AppFooter.vue         |   4 +-
 frontend/src/components/DateRangeFilter.vue   |   6 +-
 frontend/src/components/SettingsSelect.vue    |   2 +-
 frontend/src/components/TimeOfDaySelect.vue   |   6 +-
 .../settings/VehicleTypeSetting.vue           |  44 +++---
 .../__tests__/VehicleTypeSetting.spec.ts      |   8 +-
 7 files changed, 104 insertions(+), 108 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 9c14d413..24ccd461 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -24,6 +24,19 @@
   --footer-height: 48px;
   --radius: 10px;
   --demo-banner-height: 2.2rem;
+
+  /* One size for every field, text box, native select and multiselect alike, so a form or a panel
+     that mixes them lines up. */
+  --field-py: 0.375rem;
+  --field-px: 0.625rem;
+  --field-font-size: 0.875rem;
+  --field-line-height: 1.375;
+  --field-radius: 6px;
+  --field-ring: color-mix(in srgb, var(--color-primary) 30%, transparent);
+
+  /* The multiselect's own caret, filled with --color-text-muted: a data URI cannot read a custom
+     property, so each theme spells out its colour. */
+  --field-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%238892a4' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
 }
 
 [data-theme='light'] {
@@ -37,6 +50,7 @@
   --color-text-muted: #5a6a7e;
   --color-primary-light: #1d4ed8;
   --color-danger-text: #dc2626;
+  --field-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%235a6a7e' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
 }
 
 *,
@@ -47,6 +61,15 @@
   padding: 0;
 }
 
+/* Form controls take the system font from the browser rather than the page (Arial on Windows),
+   so every button, field and select would otherwise set itself apart from the text around it. */
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+}
+
 /* The browser UA stylesheet gives [popover] { border: solid; padding: 0.25em; margin: auto }.
    Our html/body { height: 100% } places extension-injected popovers (Bitwarden etc.) at
    the viewport's bottom edge, making those UA defaults visible as a thin bordered strip.
@@ -61,15 +84,6 @@
 /* Firefox */
 * {
   scrollbar-width: thin;
-/* Form controls take the system font from the browser rather than the page (Arial on Windows),
-   so every button, field and select would otherwise set itself apart from the text around it. */
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-}
-
   scrollbar-color: var(--color-border) transparent;
 }
 
@@ -273,6 +287,12 @@ body,
   font-weight: 700;
 }
 
+/* A line about the page, tucked under its title rather than spaced like a section of its own. */
+.view-subtitle {
+  margin-top: -1rem;
+  margin-bottom: 1.5rem;
+}
+
 /* ── Typography helpers ───────────────────────────────────── */
 
 .text-muted {
@@ -287,12 +307,6 @@ body,
 .text-success {
   color: var(--color-success);
 }
-/* A line about the page, tucked under its title rather than spaced like a section of its own. */
-.view-subtitle {
-  margin-top: -1rem;
-  margin-bottom: 1.5rem;
-}
-
 
 .text-danger {
   color: var(--color-danger);
@@ -657,6 +671,8 @@ body,
 
 /* ── Card title ───────────────────────────────────────────── */
 
+/* The heading of every card that has one (overview, location, trip history, the statistics
+   charts): small muted capitals with the card's icon in front. */
 .card-title {
   font-size: 0.85rem;
   font-weight: 600;
@@ -671,8 +687,6 @@ body,
 
 /* ── Leaflet map chrome ───────────────────────────────────── */
 
-/* The heading of every card that has one (overview, location, trip history, the statistics
-   charts): small muted capitals with the card's icon in front. */
 /* Leaflet ships a light-only frame: a pale grey canvas, white zoom buttons, white popups and a
    white attribution strip. Over the vector basemap, which follows the theme, those read as holes
    punched in the map, so the chrome is re-pointed at the theme tokens and now follows dark and
@@ -1101,18 +1115,24 @@ body,
 
 /* ── Form controls ────────────────────────────────────────── */
 
+/* A native select drawn like the multiselect: the same box, caret and focus ring, with room on
+   the right for the caret between two of its paddings. */
 .form-select {
-  background: var(--color-surface-2);
+  appearance: none;
+  background: var(--color-surface-2) var(--field-caret) no-repeat right var(--field-px) center /
+    0.625rem 1.125rem;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
+  border-radius: var(--field-radius);
   color: var(--color-text);
-  padding: 0.3rem 0.6rem;
-  font-size: 0.85rem;
+  padding: var(--field-py) calc(var(--field-px) * 2 + 0.625rem) var(--field-py) var(--field-px);
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
+  cursor: pointer;
 }
 
-.form-select-sm {
-  padding: 0.2rem 0.5rem;
-  font-size: 0.8rem;
+.form-select:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--field-ring);
 }
 
 /* form-switch toggle */
@@ -1157,6 +1177,11 @@ body,
   gap: 0.9rem;
 }
 
+/* A button in the stack keeps its own width instead of stretching into a bar across the form. */
+.form-stack > .btn {
+  align-self: flex-start;
+}
+
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -1177,14 +1202,10 @@ body,
 
 .form-control {
   width: 100%;
-/* A button in the stack keeps its own width instead of stretching into a bar across the form. */
-.form-stack > .btn {
-  align-self: flex-start;
-}
-
-  padding: 0.4rem 0.6rem;
-  font-size: 0.85rem;
-  border-radius: 6px;
+  padding: var(--field-py) var(--field-px);
+  font-size: var(--field-font-size);
+  line-height: var(--field-line-height);
+  border-radius: var(--field-radius);
   border: 1px solid var(--color-border);
   background-color: var(--color-surface-2);
   color: var(--color-text);
@@ -1201,7 +1222,7 @@ textarea.form-control {
   gap: 0.35rem;
 }
 
-.time-select .form-control {
+.time-select .form-select {
   flex: 1;
   min-width: 0;
 }
@@ -1275,31 +1296,6 @@ textarea.form-control {
   max-width: 640px;
 }
 
-.vehicle-type-row {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-top: 0.75rem;
-}
-
-.vehicle-type-detected {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  font-size: 0.85rem;
-}
-
-.vehicle-type-override {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.vehicle-type-override .vehicle-type-select {
-  flex: 1;
-}
-
 .settings-toggles {
   display: flex;
   flex-direction: column;
@@ -1384,7 +1380,7 @@ textarea.form-control {
   color: var(--color-primary);
 }
 
-/* ── Multiselect (fuel brand filter, notification type filter) ──────────── */
+/* ── Multiselect (map fuel type and brand filters) ──────────── */
 
 /* --ms-* vars set on :root so they cascade to the body-teleported dropdown too. Kept here,
    next to the rest of the multiselect theming, rather than merged into the palette at the top
@@ -1395,11 +1391,11 @@ textarea.form-control {
   --ms-bg-disabled: var(--color-surface);
   --ms-border-color: var(--color-border);
   --ms-border-width: 1px;
-  --ms-radius: 6px;
-  --ms-py: 0.375rem;
-  --ms-px: 0.625rem;
-  --ms-font-size: 0.875rem;
-  --ms-line-height: 1.375;
+  --ms-radius: var(--field-radius);
+  --ms-py: var(--field-py);
+  --ms-px: var(--field-px);
+  --ms-font-size: var(--field-font-size);
+  --ms-line-height: var(--field-line-height);
   --ms-spinner-color: var(--color-primary);
   --ms-caret-color: var(--color-text-muted);
   --ms-clear-color: var(--color-text-muted);
@@ -1424,7 +1420,7 @@ textarea.form-control {
   --ms-dropdown-border-width: 1px;
   --ms-dropdown-radius: 6px;
   --ms-placeholder-color: var(--color-text-muted);
-  --ms-option-font-size: 0.875rem;
+  --ms-option-font-size: var(--field-font-size);
   --ms-option-bg-pointed: var(--color-surface-2);
   --ms-option-color-pointed: var(--color-text);
   --ms-option-bg-selected: var(--color-primary);
@@ -1437,7 +1433,13 @@ textarea.form-control {
   --ms-option-px: 0.75rem;
   --ms-empty-color: var(--color-text-muted);
   --ms-ring-width: 2px;
-  --ms-ring-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+  --ms-ring-color: var(--field-ring);
+}
+
+/* The library gives the inner wrapper the whole field's height, its border included, inside that
+   border: every multiselect came out 2px taller than a text box or native select. */
+.multiselect-wrapper {
+  min-height: calc(var(--ms-font-size) * var(--ms-line-height) + var(--ms-py) * 2);
 }
 
 /* Teleported dropdown must sit above the modal (z-index 1100) */
@@ -1906,19 +1908,19 @@ textarea.form-control {
     z-index: 1001;
   }
 
-  .main-content {
-    padding: 0.75rem;
   /* The same gutter as the topbar, so the page title and cards line up under the menu button and
      the footer under both. */
+  .main-content {
+    padding: 0.75rem;
     overflow-x: hidden;
   }
 
-  /* Icon sits flush at button left so it aligns with card left edge */
-  .hamburger {
   .app-footer {
     padding: 0 0.75rem;
   }
 
+  /* Icon sits flush at button left so it aligns with card left edge */
+  .hamburger {
     justify-content: flex-start;
   }
 
diff --git a/frontend/src/components/AppFooter.vue b/frontend/src/components/AppFooter.vue
index 9f7beab0..c9036888 100644
--- a/frontend/src/components/AppFooter.vue
+++ b/frontend/src/components/AppFooter.vue
@@ -12,8 +12,8 @@ const vehicleStore = useVehicleStore()
 const { sending, send } = useVehicleCommand()
 const { isOpen: modalOpen, open: showModal, close: closeModal } = useModal()
 
-// The settings modal, and the dropdown library behind its vehicle-type picker, used to ship with
-// the footer on every page for a dialog most visits never open. It loads on first use instead.
+// The settings modal used to ship with the footer on every page, for a dialog most visits never
+// open. It loads on first use instead.
 const settingsModal = shallowRef<typeof SettingsModalComponent | null>(null)
 
 async function openModal() {
diff --git a/frontend/src/components/DateRangeFilter.vue b/frontend/src/components/DateRangeFilter.vue
index c26eda2d..039b9477 100644
--- a/frontend/src/components/DateRangeFilter.vue
+++ b/frontend/src/components/DateRangeFilter.vue
@@ -17,11 +17,7 @@ const { filterDays } = storeToRefs(useUiSettingsStore())
     icon="calendar-check"
   >
     <template #control>
-      <select
-        v-model="filterDays"
-        class="form-select form-select-sm"
-        :aria-label="t('trips.dateRange')"
-      >
+      <select v-model="filterDays" class="form-select" :aria-label="t('trips.dateRange')">
         <option :value="7">{{ t('trips.last7days') }}</option>
         <option :value="30">{{ t('trips.last30days') }}</option>
         <option :value="90">{{ t('trips.last90days') }}</option>
diff --git a/frontend/src/components/SettingsSelect.vue b/frontend/src/components/SettingsSelect.vue
index 08dea435..2a48205f 100644
--- a/frontend/src/components/SettingsSelect.vue
+++ b/frontend/src/components/SettingsSelect.vue
@@ -23,7 +23,7 @@ const model = defineModel<T>({ required: true })
       <select
         :id="id"
         v-model="model"
-        class="form-select form-select-sm settings-toggle__select"
+        class="form-select settings-toggle__select"
         :aria-label="label"
       >
         <option v-for="option in options" :key="option.value" :value="option.value">
diff --git a/frontend/src/components/TimeOfDaySelect.vue b/frontend/src/components/TimeOfDaySelect.vue
index 4876b33a..af1ba864 100644
--- a/frontend/src/components/TimeOfDaySelect.vue
+++ b/frontend/src/components/TimeOfDaySelect.vue
@@ -72,17 +72,17 @@ const minuteOptions = computed(() => {
 
 <template>
   <div class="time-select">
-    <select :id="id" v-model.number="shownHour" class="form-control" :aria-label="t('common.hour')">
+    <select :id="id" v-model.number="shownHour" class="form-select" :aria-label="t('common.hour')">
       <option v-for="h in hourOptions" :key="h.value" :value="h.value">{{ h.label }}</option>
     </select>
     <span class="time-select__separator" aria-hidden="true">:</span>
-    <select v-model.number="minute" class="form-control" :aria-label="t('common.minute')">
+    <select v-model.number="minute" class="form-select" :aria-label="t('common.minute')">
       <option v-for="m in minuteOptions" :key="m" :value="m">{{ pad(m) }}</option>
     </select>
     <select
       v-if="twelveHour"
       v-model="afternoon"
-      class="form-control"
+      class="form-select"
       :aria-label="t('common.dayPeriod')"
     >
       <option v-for="period in dayPeriods" :key="period.label" :value="period.value">
diff --git a/frontend/src/components/settings/VehicleTypeSetting.vue b/frontend/src/components/settings/VehicleTypeSetting.vue
index 8710f392..a0baa056 100644
--- a/frontend/src/components/settings/VehicleTypeSetting.vue
+++ b/frontend/src/components/settings/VehicleTypeSetting.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Multiselect from '@vueform/multiselect'
 import { useUiSettingsStore, type VehicleTypeOverride } from '@/stores/settingsUi'
 import { useDashboardSettingsStore } from '@/stores/settingsDashboard'
 import { useVehicleStore } from '@/stores/vehicle'
+import SettingsToggle from '../SettingsToggle.vue'
+import SettingsSelect, { type SettingsSelectOption } from '../SettingsSelect.vue'
 
 // What the gateway says the car is, and the override for when it gets that wrong.
 const { t } = useI18n()
@@ -29,7 +30,7 @@ const detectedLabel = computed(() => {
 const hwVersion = computed(() => vehicleStore.vehicleConfig['hw_version'] ?? null)
 
 // Computed so the labels follow a language switch made in this same dialog.
-const typeOptions = computed((): { value: VehicleTypeOverride; label: string }[] => [
+const typeOptions = computed((): SettingsSelectOption<VehicleTypeOverride>[] => [
   { value: 'auto', label: t('settings.vehicleType.auto') },
   { value: 'hev', label: t('settings.vehicleType.hev') },
   { value: 'phev', label: t('settings.vehicleType.phev') },
@@ -38,27 +39,22 @@ const typeOptions = computed((): { value: VehicleTypeOverride; label: string }[]
 </script>
 
 <template>
-  <div class="vehicle-type-row">
-    <div class="vehicle-type-detected">
-      <span class="text-muted">{{ t('settings.vehicleType.detected') }}:</span>
-      <span v-if="detectedLabel" class="badge badge-info ms-2">{{ detectedLabel }}</span>
-      <span v-if="hwVersion" class="text-muted ms-2 text-xs">({{ hwVersion }})</span>
-      <span v-if="!detectedLabel" class="text-muted ms-2">{{
-        t('settings.vehicleType.notDetected')
-      }}</span>
-    </div>
-    <div class="vehicle-type-override">
-      <label class="text-muted">{{ t('settings.vehicleType.override') }}</label>
-      <Multiselect
-        :model-value="settings.vehicleTypeOverride"
-        :options="typeOptions"
-        :searchable="false"
-        :can-clear="false"
-        :can-deselect="false"
-        append-to="body"
-        class="vehicle-type-select"
-        @update:model-value="chooseType"
-      />
-    </div>
+  <div class="settings-toggles">
+    <SettingsToggle
+      :label="t('settings.vehicleType.detected')"
+      :desc="detectedLabel ? undefined : t('settings.vehicleType.notDetected')"
+    >
+      <template #control>
+        <span v-if="hwVersion" class="text-muted text-xs">{{ hwVersion }}</span>
+        <span v-if="detectedLabel" class="badge badge-info">{{ detectedLabel }}</span>
+      </template>
+    </SettingsToggle>
+    <SettingsSelect
+      id="settings-vehicle-type"
+      :model-value="settings.vehicleTypeOverride"
+      :label="t('settings.vehicleType.override')"
+      :options="typeOptions"
+      @update:model-value="chooseType"
+    />
   </div>
 </template>
diff --git a/frontend/src/components/settings/__tests__/VehicleTypeSetting.spec.ts b/frontend/src/components/settings/__tests__/VehicleTypeSetting.spec.ts
index dc6294fe..1f72c08c 100644
--- a/frontend/src/components/settings/__tests__/VehicleTypeSetting.spec.ts
+++ b/frontend/src/components/settings/__tests__/VehicleTypeSetting.spec.ts
@@ -2,9 +2,11 @@ import { beforeEach, describe, it, expect, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { shallowMount } from '@vue/test-utils'
 import { createI18n } from 'vue-i18n'
-import Multiselect from '@vueform/multiselect'
 import VehicleTypeSetting from '../VehicleTypeSetting.vue'
 
+// By name: a generic component's prop types do not survive findComponent.
+const settingsSelect = { name: 'SettingsSelect' }
+
 const { uiSettings, applyTypeDefaults } = vi.hoisted(() => ({
   uiSettings: { vehicleTypeOverride: 'auto' },
   applyTypeDefaults: vi.fn<(type: string) => void>(),
@@ -53,7 +55,7 @@ describe('VehicleTypeSetting', () => {
     const wrapper = shallowMount(VehicleTypeSetting, { global: { plugins: [plugin] } })
     const autoLabel = () =>
       (
-        wrapper.findComponent(Multiselect).props('options') as { value: string; label: string }[]
+        wrapper.findComponent(settingsSelect).props('options') as { value: string; label: string }[]
       ).find((option) => option.value === 'auto')?.label
 
     expect(autoLabel()).toBe('Automatic')
@@ -67,7 +69,7 @@ describe('VehicleTypeSetting', () => {
   it('gives the drivetrain cards the chosen type defaults when the driver picks a type', () => {
     const wrapper = shallowMount(VehicleTypeSetting, { global: { plugins: [i18n()] } })
 
-    wrapper.findComponent(Multiselect).vm.$emit('update:model-value', 'bev')
+    wrapper.findComponent(settingsSelect).vm.$emit('update:model-value', 'bev')
 
     expect(uiSettings.vehicleTypeOverride).toBe('bev')
     expect(applyTypeDefaults).toHaveBeenCalledExactlyOnceWith('bev')

From 1bcea38d322f21ea7922a9e13a682bcefcd610d0 Mon Sep 17 00:00:00 2001
From: Jos Nienhuis <6952249+joszz@users.noreply.github.com>
Date: Sat, 10 Oct 2026 22:06:16 +0200
Subject: [PATCH 3/3] fix(map): stack the charging power filter's label and
 description

The header lacked settings-toggle__info, so the description ran on
from the label on one line, and the slider's always-on tooltips sat
over both. The header now stacks them like the fuel filters do and
leaves room above the slider for its tooltips.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/components/map/MapFilterPanel.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/map/MapFilterPanel.vue b/frontend/src/components/map/MapFilterPanel.vue
index 317484fe..c14e9352 100644
--- a/frontend/src/components/map/MapFilterPanel.vue
+++ b/frontend/src/components/map/MapFilterPanel.vue
@@ -131,7 +131,7 @@ const activeCount = computed(() => {
     <template v-if="carTakesCharge">
       <div class="charging-power-filter">
         <div class="charging-power-filter__header">
-          <div>
+          <div class="settings-toggle__info">
             <span class="settings-toggle__label">
               <font-awesome-icon icon="bolt" class="settings-toggle__icon" />
               {{ t('trips.chargingPower') }}
@@ -168,11 +168,14 @@ const activeCount = computed(() => {
   padding: 0.25rem 0 0.5rem;
 }
 
+/* The slider's value tooltips always show, above its handles: the margin keeps them clear of the
+   description. */
 .charging-power-filter__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.9rem;
+  gap: 1rem;
+  margin-bottom: 3rem;
 }
 
 .charging-power-filter__range {