fix: align unit multi select height with the other form selects

The component used a bare q-select with default-sized chips, so the field
grew taller than the neighbouring state select and skipped the shared
label/dropdown styling. Render it through DefaultSelect with dense chips,
and drop fill-input, which has no meaning for a multiple selection.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TAqjSV3BQ6Q6hsfyRPiwpq

src/components/selects/UnitMultiSelect.vue

@@ -1,20 +1,34 @@
 <template>
-  <q-select
+  <DefaultSelect
     v-model="selectedUnits"
     v-bind="$attrs"
     multiple
     use-chips
     use-input
-    fill-input
     clearable
+    option-value="value"
+    option-label="label"
     :options="filteredOptions"
     :loading="isLoading"
     :label="label"
     :bg-color="bgColor"
-    option-value="value"
-    option-label="label"
     @filter="filterFn"
   >
+    <template #selected-item="scope">
+      <q-chip
+        dense
+        removable
+        class="q-my-none"
+        color="grey-4"
+        text-color="dark"
+        size="sm"
+        :tabindex="scope.tabindex"
+        @remove="scope.removeAtIndex(scope.index)"
+      >
+        {{ scope.opt.label }}
+      </q-chip>
+    </template>
+
     <template #no-option>
       <q-item>
         <q-item-section class="text-grey">
@@ -22,12 +36,13 @@
         </q-item-section>
       </q-item>
     </template>
-  </q-select>
+  </DefaultSelect>
 </template>
 
 <script setup>
 import { onMounted, ref, watch } from "vue";
 import { getUnitsForSelect } from "src/api/unit";
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
 import { formatUnitName } from "src/helpers/utils";
 
 const { label, initialIds, bgColor } = defineProps({