api/src/services/CourseSerivce.ts

@@ -114,6 +114,7 @@ export async function getCourseEvents(): Promise<CourseEventSummary[]> {
                     E.event_date AS date,
                     E.created_by,
                     C.name AS course_name,
+                    C.short_name AS course_shortname,
                     M.name AS created_by_name
                 FROM course_events AS E
                 LEFT JOIN courses AS C 

shared/types/course.ts

@@ -84,6 +84,7 @@ export interface CourseEventSummary {
   event_id: number;
   course_id: number;
   course_name: string;
+  course_shortname: string;
   date: string;
   created_by: number;
   created_by_name: string;

ui/src/pages/TrainingReport.vue

@@ -85,7 +85,7 @@ onMounted(async () => {
                     <TableBody v-if="loaded">
                         <TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
                             @click="viewTrainingReport(report.event_id);">
-                            <TableCell class="font-medium">{{ report.course_name }}</TableCell>
+                            <TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname : report.course_name }}</TableCell>
                             <TableCell>{{ report.date }}</TableCell>
                             <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
                                 report.created_by_name