Add a shortened displayName for boats for a better mobile experience

src/components/ResourceScheduleViewerComponent.vue

@@ -55,11 +55,13 @@
     v-model="selectedDate"
     :model-resources="boatStore.boats"
     resource-key="id"
-    resource-label="name"
+    resource-label="displayName"
+    resource-width="32"
     :interval-start="12"
     :interval-count="36"
     :interval-minutes="30"
     cell-width="48"
+    style="--calendar-resources-width: 48px"
     resource-min-height="40"
     animated
     bordered
@@ -79,8 +81,8 @@
     </template>
 
     <template #resource-label="{ scope: { resource } }">
-      <div class="col-12">
-        {{ resource.name }}
+      <div class="col-12 .col-md-auto">
+        {{ resource.displayName }}
         <q-icon v-if="resource.defects" name="warning" color="warning" />
       </div>
     </template>
@@ -98,7 +100,6 @@
       ><template v-slot:append><q-icon name="timelapse" /></template></q-select
   ></q-card-section>
 </template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 import {