chore: better descriptions for active timetables statuses in scenery view

src/components/SceneryView/SceneryTimetable.vue

@@ -134,9 +134,9 @@
                   </b>
 
                   <b>&nbsp;{{ row.train.trainNo }}</b>
-                  <span>&nbsp;&bull;&nbsp;</span>
-                  <span>{{ row.train.driverName }}</span>
                 </span>
+                <span>&bull;</span>
+                <span>{{ row.train.driverName }}</span>
 
                 <!-- Train stop comments -->
                 <span
@@ -510,7 +510,8 @@ export default defineComponent({
 
 .info-train {
   display: flex;
-  gap: 0.5em;
+  flex-wrap: wrap;
+  gap: 0.25em;
 }
 
 .info-train > .train-badge {

src/components/SceneryView/ScheduledTrainStatus.vue

@@ -2,11 +2,9 @@
   <div class="general-status">
     <span
       :class="computedScheduledTrain.status"
-      data-tooltip-type="HtmlTooltip"
-      :data-tooltip-content="computedScheduledTrain.stopStatusDescription"
       @click.prevent="() => {}"
+      v-html="computedScheduledTrain.stopStatusIndicator"
     >
-      {{ computedScheduledTrain.stopStatusIndicator }}
     </span>
   </div>
 </template>
@@ -41,8 +39,7 @@ export default defineComponent({
 
       switch (status) {
         case StopStatus.ARRIVING:
-          stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-arriving', {
+          stopStatusIndicator = this.$t('timetables.desc-arriving', {
             prevStationName: prevElement?.stationName ?? '',
             prevDepartureLine: prevElement?.departureRouteExt ?? ''
           });
@@ -51,9 +48,6 @@ export default defineComponent({
         case StopStatus.ONLINE:
         case StopStatus.STOPPED:
           stopStatusIndicator = nextElement?.arrivalRouteExt
-            ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
-            : `${this.$t('timetables.desc-end')}`;
-          stopStatusDescription = nextElement?.arrivalRouteExt
             ? this.$t(`timetables.desc-${status}`, {
                 nextStationName: nextElement?.stationName,
                 nextArrivalLine: nextElement?.arrivalRouteExt
@@ -62,14 +56,14 @@ export default defineComponent({
           break;
 
         case StopStatus.DEPARTED:
-          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
+          // stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
 
           if (!nextElement?.stationName) {
-            stopStatusDescription = this.$t('timetables.desc-departed-ends', {
+            stopStatusIndicator = this.$t('timetables.desc-departed-ends', {
               nextStationName: currentElement.stationName
             });
           } else {
-            stopStatusDescription = this.$t('timetables.desc-departed', {
+            stopStatusIndicator = this.$t('timetables.desc-departed', {
               nextStationName: nextElement?.stationName ?? currentElement.stationName,
               nextArrivalLine: nextElement?.arrivalRouteExt
             });
@@ -78,16 +72,16 @@ export default defineComponent({
           break;
 
         case StopStatus.DEPARTED_AWAY:
-          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-departed-away', {
+          // stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
+          stopStatusIndicator = this.$t('timetables.desc-departed-away', {
             nextStationName: nextElement?.stationName,
             nextArrivalLine: nextElement?.arrivalRouteExt
           });
           break;
 
         case StopStatus.TERMINATED:
-          stopStatusIndicator = `X ${this.$t('timetables.desc-terminated')}`;
-          stopStatusDescription = this.$t('timetables.desc-terminated');
+          // stopStatusIndicator = `X ${this.$t('timetables.desc-terminated')}`;
+          stopStatusIndicator = this.$t('timetables.desc-terminated');
           break;
 
         default:
@@ -95,7 +89,6 @@ export default defineComponent({
       }
       return {
         ...this.sceneryTimetableRow,
-        stopStatusDescription,
         stopStatusIndicator
       };
     }
@@ -106,7 +99,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .general-status {
   margin-top: 0.5em;
-  cursor: help;
 
   span.arriving {
     color: #ccc;
@@ -114,17 +106,14 @@ export default defineComponent({
 
   span.departed {
     color: lime;
-    font-weight: bold;
 
     &-away {
-      font-weight: bold;
       color: #5ecc5e;
     }
   }
 
   span.stopped {
     color: #ffa600;
-    font-weight: bold;
   }
 
   span.online {
@@ -133,7 +122,6 @@ export default defineComponent({
 
   span.terminated {
     color: salmon;
-    font-weight: bold;
   }
 }
 </style>