From 5d883c082519553347992b3cd8118481607c4e84 Mon Sep 17 00:00:00 2001
From: Akash Ramaswamy <87078332+akash-ramaswamy@users.noreply.github.com>
Date: Sun, 10 Dec 2023 03:32:24 +0530
Subject: [PATCH] fix: actions on log UI issues (#2580)

---
 assets/components/LogViewer/ComplexLogItem.vue       |  2 +-
 assets/components/LogViewer/SimpleLogItem.vue        |  5 ++++-
 .../__snapshots__/LogEventSource.spec.ts.snap        | 12 ++++++------
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/assets/components/LogViewer/ComplexLogItem.vue b/assets/components/LogViewer/ComplexLogItem.vue
index 73e76c4d..4c5b40ca 100644
--- a/assets/components/LogViewer/ComplexLogItem.vue
+++ b/assets/components/LogViewer/ComplexLogItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex gap-x-2">
+  <div class="relative flex w-full gap-x-2">
     <div v-if="showStd">
       <log-std :std="logEntry.std"></log-std>
     </div>
diff --git a/assets/components/LogViewer/SimpleLogItem.vue b/assets/components/LogViewer/SimpleLogItem.vue
index 898f71c7..8156e2c8 100644
--- a/assets/components/LogViewer/SimpleLogItem.vue
+++ b/assets/components/LogViewer/SimpleLogItem.vue
@@ -3,7 +3,10 @@
     <log-std :std="logEntry.std" v-if="showStd" />
     <log-date :date="logEntry.date" v-if="showTimestamp" />
     <log-level class="flex" :level="logEntry.level" :position="logEntry.position" />
-    <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap" v-html="colorize(logEntry.message)"></div>
+    <div
+      class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"
+      v-html="colorize(logEntry.message)"
+    ></div>
     <copy-log-message
       class="duration-250 absolute -right-1 opacity-0 transition-opacity delay-150 group-hover/entry:opacity-100"
       :message="logEntry.message"
diff --git a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
index 99d5c47b..9dbe8ef0 100644
--- a/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/LogEventSource.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 1
         <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="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
-      <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
       <!--v-if-->
     </div>
   </li>
@@ -27,7 +27,7 @@ exports[`<LogEventSource /> > render html correctly > should render dates with 2
         <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="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
-      <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
       <!--v-if-->
     </div>
   </li>
@@ -44,7 +44,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages 1`]
         <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="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
-      <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">This is a message.</div>
       <!--v-if-->
     </div>
   </li>
@@ -61,7 +61,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
         <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="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
-      <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap"><span style="color:#000">black<span style="color:#AAA">white</span></span></div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"><span style="color:#000">black<span style="color:#AAA">white</span></span></div>
       <!--v-if-->
     </div>
   </li>
@@ -79,7 +79,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
         <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="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
-      <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap"><mark>test</mark> bar</div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap"><mark>test</mark> bar</div>
       <!--v-if-->
     </div>
   </li>
@@ -96,7 +96,7 @@ exports[`<LogEventSource /> > render html correctly > should render messages wit
         <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="" class="mt-1.5 h-2.5 w-2.5 flex-none rounded-lg flex"></div>
-      <div class="whitespace-pre-wrap group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
+      <div class="whitespace-pre-wrap [word-break:break-word] group-[.disable-wrap]:whitespace-nowrap">&lt;test&gt;foo bar&lt;/test&gt;</div>
       <!--v-if-->
     </div>
   </li>