Fixed column width on mobile and added a note column

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>