fix: multi-line styling fixes (#2062)

* fix: multi-line styling fixes * style: tweak text size of event body button
Logflare · May 10, 2024 · 1d8199a · 1d8199a
1 parent b92d760
commit 1d8199a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 7 deletions.
diff --git a/lib/logflare_web/live/search_live/templates/logs_list.html.heex b/lib/logflare_web/live/search_live/templates/logs_list.html.heex
@@ -16,8 +16,7 @@
                 format_timestamp(timestamp) <> " UTC"
               end %>
             <li id={"log-event_#{log.id || log.body["timestamp"]}"} class="tw-group">
-              <mark class="log-datestamp" data-timestamp={timestamp}>
-                <%= formatted_timestamp %></mark>&nbsp;<%= message %>
+              <span class="tw-whitespace-pre-wrap"><mark class="log-datestamp" data-timestamp={timestamp}><%= formatted_timestamp %></mark>&nbsp;<%= message %></span>
               <span class="tw-inline-block tw-text-[0.65rem] tw-align-text-bottom tw-inline-flex tw-flex-row tw-gap-2">
                 <%= live_modal_show_link(component: LogflareWeb.Search.LogEventViewerComponent, modal_id: :log_event_viewer, title: "Log Event", phx_value_log_event_id: log.id, phx_value_log_event_timestamp: log.body["timestamp"]) do %>
                   <span>view</span>

diff --git a/lib/logflare_web/templates/source/show.html.eex b/lib/logflare_web/templates/source/show.html.eex
@@ -26,11 +26,8 @@
   <ul id="logs-list" class="list-unstyled console-text-list" hidden>
     <%= @logs |> Enum.with_index |> Enum.map(fn {log, inx} -> %>
     <li>
-      <mark class="log-datestamp" data-timestamp="<%= log.body["timestamp"] %>">
-        <%= log.body["timestamp"] %>
-      </mark>
-      <%= log.body["event_message"] %>
-      <a class="metadata-link" data-toggle="collapse" href="#metadata-<%= inx %>" aria-expanded="false">
+      <span class="tw-whitespace-pre-wrap"><mark class="log-datestamp" data-timestamp="<%= log.body["timestamp"] %>"><%= log.body["timestamp"] %></mark> <%= log.body["event_message"] %></span>
+      <a class="metadata-link" data-toggle="collapse" href="#metadata-<%= inx %>" aria-expanded="false" class=" tw-text-[0.65rem]"">
         event body
       </a>
       <div class="collapse metadata" id="metadata-<%= inx %>">