fix: actions on log UI issues (#2580)

amir20 · Dec 9, 2023 · 5d883c0 · 5d883c0
1 parent e6fa8ce
commit 5d883c0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>