chore(flags): adjusted flags styles

src/components/Global/FlagIcon.vue

@@ -31,6 +31,12 @@ const languageFlagSrc = computed(
 </script>
 
 <style scoped>
+.flag-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .flag-icon img {
   vertical-align: middle;
 }

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -1,14 +1,13 @@
 <template>
   <li class="dispatcher-history-entry">
     <div class="entry-info">
-      <span>
+      <span class="entry-info-left">
-        <span>
+        <div class="station-info">
           <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
             <b>{{ entry.stationName }}</b>
           </router-link>
 
           <b class="text--grayed"> #{{ entry.stationHash }}</b>
-        </span>
           &bull;
           <b
             v-if="entry.dispatcherLevel !== null"
@@ -18,7 +17,6 @@
             {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
           </b>
 
-        <b style="margin-left: 5px">
           <span
             v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
             data-tooltip-type="DonatorTooltip"
@@ -38,11 +36,11 @@
           >
             {{ entry.dispatcherName }}
           </router-link>
-        </b>
 
           <span class="dispatcher-language" v-if="entry.dispatcherLanguageId != null">
-          <FlagIcon :language-id="entry.dispatcherLanguageId" width="1.5em" />
+            <FlagIcon :language-id="entry.dispatcherLanguageId" width="1.75em" />
           </span>
+        </div>
 
         <div>
           <span v-if="entry.timestampTo">
@@ -172,7 +170,7 @@ export default defineComponent({
 
 .dispatcher-language {
   display: inline-block;
-  margin: 0 0.25em;
+  vertical-align: middle;
 }
 
 .entry-info {
@@ -196,6 +194,14 @@ export default defineComponent({
   margin-top: 1em;
 }
 
+.station-info {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  align-items: center;
+  gap: 0.25em;
+}
+
 .status-list {
   display: flex;
   overflow: auto;
@@ -215,5 +221,9 @@ export default defineComponent({
     justify-content: center;
     text-align: center;
   }
+
+  .station-info {
+    justify-content: center;
+  }
 }
 </style>

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -73,7 +73,7 @@
       </router-link>
 
       <div v-if="timetable.driverLanguageId != null">
-        <FlagIcon :language-id="timetable.driverLanguageId" width="1.5em" />
+        <FlagIcon :language-id="timetable.driverLanguageId" width="1.75em" />
       </div>
     </span>
 

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -21,6 +21,8 @@
         </span>
         <span v-else>{{ onlineScenery.dispatcherName }}</span>
       </router-link>
+
+      <FlagIcon :languageId="onlineScenery.dispatcherLanguageId" width="1.25em" />
     </div>
 
     <div class="info-bottom">
@@ -51,9 +53,11 @@ import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import { ActiveScenery } from '../../../typings/common';
 import { useApiStore } from '../../../store/apiStore';
+import FlagIcon from '../../Global/FlagIcon.vue';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin],
+  components: { StationStatusBadge, FlagIcon },
 
   data() {
     return {
@@ -66,8 +70,7 @@ export default defineComponent({
       type: Object as PropType<ActiveScenery>,
       required: false
     }
-  },
+  }
-  components: { StationStatusBadge }
 });
 </script>
 

src/components/TrainsView/TrainInfo.vue

@@ -68,7 +68,7 @@
         </div>
 
         <div class="train-language-flag">
-          <FlagIcon :language-id="train.driverLanguageId" width="1.5em" />
+          <FlagIcon :language-id="train.driverLanguageId" width="1.75em" />
         </div>
       </div>
     </div>