chore(flags): adjusted flags styles

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -1,24 +1,22 @@
 <template>
   <li class="dispatcher-history-entry">
     <div class="entry-info">
-      <span>
-        <span>
+      <span class="entry-info-left">
+        <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"
-          class="level-badge dispatcher"
-          :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
-        >
-          {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
-        </b>
+          &bull;
+          <b
+            v-if="entry.dispatcherLevel !== null"
+            class="level-badge dispatcher"
+            :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
+          >
+            {{ 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" />
-        </span>
+          <span class="dispatcher-language" v-if="entry.dispatcherLanguageId != null">
+            <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>