diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index 288e2b04..b55d856a 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -3,7 +3,7 @@
     <div class="column is-narrow" v-if="showTimestamp">
       <log-date :date="logEntry.date"></log-date>
     </div>
-    <div class="column is-narrow">
+    <div class="column is-narrow is-flex">
       <log-level :level="logEntry.level"></log-level>
     </div>
     <div class="column">
diff --git a/assets/components/LogViewer/LogLevel.vue b/assets/components/LogViewer/LogLevel.vue
index 12aa2a75..5272b10e 100644
--- a/assets/components/LogViewer/LogLevel.vue
+++ b/assets/components/LogViewer/LogLevel.vue
@@ -16,23 +16,27 @@ div {
   width: 0.7em;
   height: 0.7em;
   border-radius: 0.5em;
-
-  &[data-position="middle"] {
-    border-radius: 0;
-    height: 2em;
-    margin: -0.5em 0;
-  }
+  align-self: center;
 
   &[data-position="start"] {
     border-radius: 0.5em 0.5em 0 0;
-    height: 1.2em;
-    margin-bottom: -0.4em;
+    height: 70%;
+    margin-bottom: -0.2em;
+    align-self: flex-end;
+  }
+
+  &[data-position="middle"] {
+    border-radius: 0;
+    height: auto;
+    margin: -0.2em 0;
+    align-self: auto;
   }
 
   &[data-position="end"] {
     border-radius: 0 0 0.5em 0.5em;
-    height: 1.4em;
-    margin-top: -0.4em;
+    height: 70%;
+    margin-top: -0.2em;
+    align-self: flex-start;
   }
 
   &.debug,
diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue
index bec5264d..9ca458d5 100644
--- a/assets/components/LogViewer/SimpleLogItem.vue
+++ b/assets/components/LogViewer/SimpleLogItem.vue
@@ -3,7 +3,7 @@
     <div class="column is-narrow" v-if="showTimestamp">
       <log-date :date="logEntry.date"></log-date>
     </div>
-    <div class="column is-narrow">
+    <div class="column is-narrow is-flex">
       <log-level :level="logEntry.level" :position="logEntry.position"></log-level>
     </div>
     <div class="text column" v-html="colorize(logEntry.message)"></div>
diff --git a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
index ba4ba5b6..f426a4e5 100644
--- a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
@@ -25,7 +25,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
     </div>
     <div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
       <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
+      <div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
         <div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
       </div>
       <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
@@ -59,7 +59,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
     </div>
     <div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
       <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42</time></div>
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
+      <div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
         <div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
       </div>
       <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>
@@ -93,7 +93,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
     </div>
     <div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
       <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
+      <div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
         <div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
       </div>
       <div class=\\"text column\\" data-v-a49e52d4=\\"\\">This is a message.</div>
@@ -127,7 +127,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
     </div>
     <div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
       <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
+      <div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
         <div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
       </div>
       <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><span style=\\"color:#000\\">black<span style=\\"color:#AAA\\">white</span></span></div>
@@ -161,7 +161,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
     </div>
     <div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
       <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
+      <div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
         <div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
       </div>
       <div class=\\"text column\\" data-v-a49e52d4=\\"\\"><mark>test</mark> bar</div>
@@ -195,7 +195,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
     </div>
     <div class=\\"columns is-1 is-variable is-mobile\\" visible-keys=\\"\\" data-v-a49e52d4=\\"\\" data-v-2e92daca=\\"\\">
       <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\"><time datetime=\\"2019-06-12T10:55:42.459Z\\" class=\\"date\\" data-v-de513450=\\"\\" data-v-a49e52d4=\\"\\">06/12/2019 10:55:42 AM</time></div>
-      <div class=\\"column is-narrow\\" data-v-a49e52d4=\\"\\">
+      <div class=\\"column is-narrow is-flex\\" data-v-a49e52d4=\\"\\">
         <div class=\\"\\" data-v-e625cddd=\\"\\" data-v-a49e52d4=\\"\\"></div>
       </div>
       <div class=\\"text column\\" data-v-a49e52d4=\\"\\">&lt;test&gt;foo bar&lt;/test&gt;</div>