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">
+      <div class="col-12 .col-md-auto">
-        {{ resource.name }}
+        {{ 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 {

src/stores/boat.ts

@@ -5,6 +5,7 @@ import { defineStore } from 'pinia';
 export interface Boat {
   id: number;
   name: string;
+  displayName?: string;
   class?: string;
   year?: number;
   imgsrc?: string;
@@ -27,6 +28,7 @@ const getSampleData = () => [
   {
     id: 1,
     name: 'ProjectX',
+    displayName: 'PX',
     class: 'J/27',
     year: 1981,
     imgsrc: '/tmpimg/j27.png',
@@ -52,6 +54,7 @@ and rough engine performance.`,
   {
     id: 2,
     name: 'Take5',
+    displayName: 'T5',
     class: 'J/27',
     year: 1985,
     imgsrc: '/tmpimg/j27.png',
@@ -60,6 +63,7 @@ and rough engine performance.`,
   {
     id: 3,
     name: 'WeeBeestie',
+    displayName: 'WB',
     class: 'Capri 25',
     year: 1989,
     imgsrc: '/tmpimg/capri25.png',