Fixed column width on mobile and added a note column

resources/js/Components/FlightsGoneBy/DepartureBoard.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
 const page = usePage<SharedProps>().props
 const ITEMS_PER_PAGE = 25
 
-const defaultColumns = ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined']
+const defaultColumns = ['airline', 'flight_number', 'departure_airport', 'arrival_airport', 'departure_date', 'departure_time', 'arrival_time', 'duration', 'distance', 'aircraft', 'registration', 'class_seat_combined', 'note']
 const columnsToShow = computed(() => page.auth.user?.resolved_settings?.departure_board_columns ?? defaultColumns)
 const showColumn = (column: string) => columnsToShow.value.includes(column)
 
@@ -44,6 +44,7 @@ const allHeaders = [
     { title: 'SEAT TYPE', key: 'seat_type_id', sortable: true },
     { title: 'SEAT NO.', key: 'seat_number', sortable: true },
     { title: 'REASON', key: 'flight_reason_id', sortable: true },
+    { title: 'NOTE', key: 'note', sortable: true },
     { title: '', key: 'actions', sortable: false },
 ]
 

resources/js/Components/FlightsGoneBy/DepartureBoardTableRow.vue

@@ -41,7 +41,7 @@ const reasonBadgeVariant = (reason: string) => {
 }
 
 const showColumn = (column: string) => props.columnsToShow.includes(column)
-
+console.log(props.columnsToShow)
 </script>
 
 <template>
@@ -170,6 +170,10 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
             </span>
         </td>
 
+        <td v-if="showColumn('note')" class="v-data-table__td note-cell">
+            <span v-if="flight.note" class="note-text">{{ flight.note }}</span>
+        </td>
+
         <td class="v-data-table__td actions-cell">
             <UserFlightContextMenu :profile-user="user" :can-edit="canEdit" :flight="flight" />
         </td>
@@ -184,6 +188,17 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
     padding-right: 0 !important;
 }
 
+.note-cell {
+    min-width: 200px;
+    max-width: 320px;
+}
+
+.note-text {
+    display: block;
+    overflow: hidden;
+    font-size: 0.85rem;
+}
+
 .city-name{
     color: #556;
     text-transform: uppercase;
@@ -211,23 +226,14 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
     align-items: center;
     vertical-align: middle;
     gap: 0.5rem;
-    overflow-x: auto;
-    max-width: 160px;
-    /* Hide scrollbar but keep functionality */
-    scrollbar-width: none;
-    &::-webkit-scrollbar { display: none; }
+    width: fit-content;
 }
 
 .iata {
     font-weight: 600;
 }
 
-.class-cell {
-    display: flex;
-    align-items: center;
-    vertical-align: middle;
-    gap: 0.5rem;
-}
+
 
 .actions-cell {
     width: 40px;
@@ -277,15 +283,5 @@ const showColumn = (column: string) => props.columnsToShow.includes(column)
         padding: 0 !important;
     }
 
-    .class-badges-cell {
-        max-width: 140px;
-        overflow: hidden;
-    }
-
-    .class-cell > *:not(:first-child) {
-        display: none;
-    }
-
-
 }
 </style>