diff --git a/assets/components/LogViewer/LogItem.vue b/assets/components/LogViewer/LogItem.vue
index 10981951..6c30aee9 100644
--- a/assets/components/LogViewer/LogItem.vue
+++ b/assets/components/LogViewer/LogItem.vue
@@ -2,7 +2,7 @@
   <div class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
     <LogStd :std="logEntry.std" class="shrink-0 select-none" v-if="showStd" />
 
-    <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[.random-color]:flex-col-reverse md:flex-row">
+    <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row">
       <RandomColorTag class="w-30 shrink-0 select-none md:w-40" :value="host.name" v-if="showHostname" />
       <RandomColorTag
         class="w-30 shrink-0 select-none group-[.compact]:flex-1 md:w-40"
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index 37545ef1..5c4bf5d2 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
   <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 group-[.compact]:items-stretch">
       <!--v-if-->
-      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[.random-color]:flex-col-reverse md:flex-row">
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row">
         <!--v-if-->
         <!--v-if-->
         <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
@@ -27,7 +27,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
   <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 group-[.compact]:items-stretch">
       <!--v-if-->
-      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[.random-color]:flex-col-reverse md:flex-row">
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row">
         <!--v-if-->
         <!--v-if-->
         <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">
@@ -49,7 +49,7 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
   <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 group-[.compact]:items-stretch">
       <!--v-if-->
-      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[.random-color]:flex-col-reverse md:flex-row">
+      <div class="flex gap-x-2 gap-y-1 group-[.compact]:gap-y-0 has-[>_*:nth-of-type(2)]:flex-col-reverse md:flex-row">
         <!--v-if-->
         <!--v-if-->
         <div class="tag bg-base-100 inline-flex items-center justify-center rounded-sm px-2 py-[0.2em] [[size='small']]:text-[0.8rem] items-start! shrink-0 select-none" size="small">