diff --git a/assets/components.d.ts b/assets/components.d.ts
index fa40e051..12a9c468 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -49,6 +49,7 @@ declare module 'vue' {
     LogAnalytics: typeof import('./components/LogViewer/LogAnalytics.vue')['default']
     LogDate: typeof import('./components/LogViewer/LogDate.vue')['default']
     LogDetails: typeof import('./components/LogViewer/LogDetails.vue')['default']
+    LogItem: typeof import('./components/LogViewer/LogItem.vue')['default']
     LogLevel: typeof import('./components/LogViewer/LogLevel.vue')['default']
     LogList: typeof import('./components/LogViewer/LogList.vue')['default']
     LogMessageActions: typeof import('./components/LogViewer/LogMessageActions.vue')['default']
diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index 2f5fa3e1..456e238b 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -1,30 +1,16 @@
 <template>
-  <div class="group/item clickable relative flex w-full gap-x-2" @click="showDrawer(LogDetails, { entry: logEntry })">
-    <div v-if="showContainerName">
-      <ContainerName :id="logEntry.containerID" />
-    </div>
-    <div v-if="showStd">
-      <LogStd :std="logEntry.std" />
-    </div>
-    <div v-if="showTimestamp">
-      <LogDate :date="logEntry.date" class="select-none" />
-    </div>
-    <div class="flex">
-      <LogLevel :level="logEntry.level" />
-    </div>
-    <div>
-      <ul class="fields space-x-4">
-        <li v-for="(value, name) in validValues" :key="name">
-          <span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
-          <template v-else-if="Array.isArray(value)">
-            <span class="font-bold" v-html="JSON.stringify(value)"> </span>
-          </template>
-          <span class="font-bold" v-html="stripAnsi(value.toString())" v-else></span>
-        </li>
-        <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
-      </ul>
-    </div>
-  </div>
+  <LogItem :logEntry :showContainerName @click="showDrawer(LogDetails, { entry: logEntry })" class="clickable">
+    <ul class="fields space-x-4">
+      <li v-for="(value, name) in validValues" :key="name">
+        <span class="text-light">{{ name }}=</span><span class="font-bold" v-if="value === null">&lt;null&gt;</span>
+        <template v-else-if="Array.isArray(value)">
+          <span class="font-bold" v-html="JSON.stringify(value)"> </span>
+        </template>
+        <span class="font-bold" v-html="stripAnsi(value.toString())" v-else></span>
+      </li>
+      <li class="text-light" v-if="Object.keys(validValues).length === 0">all values are hidden</li>
+    </ul>
+  </LogItem>
 </template>
 <script lang="ts" setup>
 import stripAnsi from "strip-ansi";
diff --git a/assets/components/LogViewer/ContainerName.vue b/assets/components/LogViewer/ContainerName.vue
index fd39dd58..1589374d 100644
--- a/assets/components/LogViewer/ContainerName.vue
+++ b/assets/components/LogViewer/ContainerName.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid w-40 overflow-hidden rounded text-center text-sm text-white">
+  <div class="tag grid w-40 overflow-hidden rounded text-center text-sm text-white">
     <div class="random-color col-start-1 row-start-1 brightness-75"></div>
     <div class="col-start-1 row-start-1 truncate px-2 brightness-100 [direction:rtl]">{{ containerNames[id] }}</div>
   </div>
diff --git a/assets/components/LogViewer/LogDate.vue b/assets/components/LogViewer/LogDate.vue
index 785ac239..f79e6121 100644
--- a/assets/components/LogViewer/LogDate.vue
+++ b/assets/components/LogViewer/LogDate.vue
@@ -1,5 +1,5 @@
 <template>
-  <Tag size="small">
+  <Tag size="small" class="!items-start">
     <DateTime :date="date" class="whitespace-nowrap text-blue" />
   </Tag>
 </template>
diff --git a/assets/components/LogViewer/LogItem.vue b/assets/components/LogViewer/LogItem.vue
new file mode 100644
index 00000000..2a9b0868
--- /dev/null
+++ b/assets/components/LogViewer/LogItem.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
+    <LogStd :std="logEntry.std" class="select-none" v-if="showStd" />
+    <ContainerName class="shrink-0 select-none" :id="logEntry.containerID" v-if="showContainerName" />
+    <LogDate :date="logEntry.date" v-if="showTimestamp" class="select-none" />
+    <LogLevel
+      class="flex select-none"
+      :level="logEntry.level"
+      :position="logEntry instanceof SimpleLogEntry ? logEntry.position : undefined"
+    />
+    <slot />
+  </div>
+</template>
+<script lang="ts" setup>
+import { LogEntry, SimpleLogEntry } from "@/models/LogEntry";
+
+const { showContainerName = false, logEntry } = defineProps<{
+  logEntry: LogEntry<any>;
+  showContainerName?: boolean;
+}>();
+</script>
+<style scoped lang="postcss">
+.log-wrapper :deep(a) {
+  @apply text-primary underline-offset-4 hover:underline;
+}
+</style>
diff --git a/assets/components/LogViewer/LogStd.vue b/assets/components/LogViewer/LogStd.vue
index 58e3a25c..bd7dd045 100644
--- a/assets/components/LogViewer/LogStd.vue
+++ b/assets/components/LogViewer/LogStd.vue
@@ -1,5 +1,5 @@
 <template>
-  <Tag size="small" :std="std">
+  <Tag size="small" :std="std" class="!items-start">
     {{ std }}
   </Tag>
 </template>
diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue
index ee08431d..5581e593 100644
--- a/assets/components/LogViewer/SimpleLogItem.vue
+++ b/assets/components/LogViewer/SimpleLogItem.vue
@@ -1,9 +1,5 @@
 <template>
-  <div class="relative flex w-full items-start gap-x-2">
-    <LogStd :std="logEntry.std" v-if="showStd" />
-    <ContainerName class="flex-none" :id="logEntry.containerID" v-if="showContainerName" />
-    <LogDate :date="logEntry.date" v-if="showTimestamp" class="select-none" />
-    <LogLevel class="flex" :level="logEntry.level" :position="logEntry.position" />
+  <LogItem :logEntry :showContainerName>
     <div
       class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
       v-html="linkify(colorize(logEntry.message))"
@@ -13,7 +9,7 @@
       :message="() => decodeXML(stripAnsi(logEntry.message))"
       :log-entry="logEntry"
     />
-  </div>
+  </LogItem>
 </template>
 <script lang="ts" setup>
 import { SimpleLogEntry } from "@/models/LogEntry";
@@ -37,8 +33,3 @@ const urlPattern = /(https?:\/\/[^\s]+)/g;
 const linkify = (text: string) =>
   text.replace(urlPattern, (url) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
 </script>
-<style scoped lang="postcss">
-.log-wrapper :deep(a) {
-  @apply text-primary underline-offset-4 hover:underline;
-}
-</style>
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index b5608d53..ef3b8b89 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -3,15 +3,15 @@
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 12 hour style 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
+    <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-a49e52d4="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
+      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
-      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
-      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+      <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>
@@ -22,15 +22,15 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 exports[`<ContainerEventSource /> > render html correctly > should render dates with 24 hour style 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
+    <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-a49e52d4="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
+      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42</time></div>
       </div>
-      <div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
-      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
-      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+      <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">foo bar</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>
@@ -41,15 +41,15 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
 exports[`<ContainerEventSource /> > render html correctly > should render messages 1`] = `
 "<ul data-v-cf9ff940="" class="events group pt-4 medium">
   <li data-v-cf9ff940="" data-key="1" data-time="1560336942459" class="group/entry">
-    <div data-v-a49e52d4="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2">
+    <div data-v-1344ff3d="" data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
       <!--v-if-->
       <!--v-if-->
-      <div data-v-961504e7="" data-v-a49e52d4="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] select-none" size="small">
+      <div data-v-961504e7="" data-v-1344ff3d="" class="tag inline-flex items-center justify-center rounded bg-base-lighter px-2 py-[0.2em] !items-start select-none" size="small">
         <div class="inline-flex gap-2 whitespace-nowrap text-blue"><time datetime="2019-06-12T10:55:42.459Z" class="mobile-hidden">06/12/2019</time><time datetime="2019-06-12T10:55:42.459Z">10:55:42 AM</time></div>
       </div>
-      <div data-v-e625cddd="" data-v-a49e52d4="" class="mt-1.5 size-2.5 flex-none rounded-lg flex"></div>
-      <div data-v-a49e52d4="" class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
-      <div data-v-a49e52d4="" class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
+      <div data-v-e625cddd="" data-v-1344ff3d="" class="mt-1.5 size-2.5 flex-none rounded-lg flex select-none"></div>
+      <div class="log-wrapper whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
+      <div class="flex gap-2 duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100">
         <!--v-if-->
       </div>
     </div>
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index 7ced5c66..21e98573 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -23,7 +23,7 @@
       </div>
       <div
         class="animate-background h-1 w-1/2 bg-gradient-radial from-primary to-transparent to-75%"
-        v-show="!scrollContext.paused && !scrollContext.loading"
+        v-show="!scrollContext.paused"
       ></div>
       <div ref="scrollObserver" class="h-px"></div>
     </main>