From 8dde2fe9ac844fec0bbb7ad7360b483e3ea38a1b Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 12 Jun 2025 09:06:36 -0700
Subject: [PATCH] feat: changes log actions to hover just a little and take up
 less space (#3972)

---
 assets/components/LogViewer/LogActions.vue           | 11 ++++-------
 .../LogViewer/__snapshots__/EventSource.spec.ts.snap | 12 ++++++------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/assets/components/LogViewer/LogActions.vue b/assets/components/LogViewer/LogActions.vue
index ff68b496..a0c6fe89 100644
--- a/assets/components/LogViewer/LogActions.vue
+++ b/assets/components/LogViewer/LogActions.vue
@@ -1,13 +1,10 @@
 <template>
-  <div
-    class="dropdown dropdown-start dropdown-hover font-sans group-[.compact]:absolute group-[.compact]:-left-0.5"
-    v-show="container"
-  >
+  <div class="dropdown dropdown-start dropdown-hover absolute -left-2 font-sans" v-show="container">
     <router-link
       v-if="isSearching"
       @click="resetSearch()"
       tabindex="0"
-      class="btn btn-square btn-ghost btn-xs border-base-content/20 pointer-events-auto! -mr-1 -ml-3 opacity-0 shadow-sm group-hover/entry:opacity-100"
+      class="btn btn-square btn-xs border-base-content/20 bg-base-100 pointer-events-auto! opacity-0 shadow-sm group-hover/entry:opacity-90"
       :to="{
         name: '/container/[id].time.[datetime]',
         params: { id: container.id, datetime: logEntry.date.toISOString() },
@@ -18,14 +15,14 @@
     </router-link>
     <button
       tabindex="0"
-      class="btn btn-square btn-ghost btn-xs border-base-content/20 -mr-1 -ml-3 border opacity-0 shadow-sm group-hover/entry:opacity-100"
+      class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"
       v-else
     >
       <ion:ellipsis-vertical />
     </button>
     <ul
       tabindex="0"
-      class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 -mr-1 -ml-3 w-52 border p-1 text-sm shadow-sm"
+      class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm"
       @click="hideMenu"
     >
       <li v-if="isSearching">
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index f801d9ba..a6099feb 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -7,12 +7,12 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
   </li>
   <li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
     <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
-      <div class="dropdown dropdown-start dropdown-hover font-sans group-[.compact]:absolute group-[.compact]:-left-0.5"><button tabindex="0" class="btn btn-square btn-ghost btn-xs -mr-1 -ml-3 opacity-0 group-hover/entry:opacity-100"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
+      <div class="dropdown dropdown-start dropdown-hover absolute -left-2 font-sans"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
             <circle cx="256" cy="256" r="48" fill="currentColor"></circle>
             <circle cx="256" cy="416" r="48" fill="currentColor"></circle>
             <circle cx="256" cy="96" r="48" fill="currentColor"></circle>
           </svg></button>
-        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 -mr-1 -ml-3 w-52 border p-1 text-sm shadow-sm">
+        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
@@ -41,12 +41,12 @@ exports[`<ContainerEventSource /> > render html correctly > should render dates
   </li>
   <li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
     <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
-      <div class="dropdown dropdown-start dropdown-hover font-sans group-[.compact]:absolute group-[.compact]:-left-0.5"><button tabindex="0" class="btn btn-square btn-ghost btn-xs -mr-1 -ml-3 opacity-0 group-hover/entry:opacity-100"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
+      <div class="dropdown dropdown-start dropdown-hover absolute -left-2 font-sans"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
             <circle cx="256" cy="256" r="48" fill="currentColor"></circle>
             <circle cx="256" cy="416" r="48" fill="currentColor"></circle>
             <circle cx="256" cy="96" r="48" fill="currentColor"></circle>
           </svg></button>
-        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 -mr-1 -ml-3 w-52 border p-1 text-sm shadow-sm">
+        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->
@@ -75,12 +75,12 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
   </li>
   <li data-v-cf9ff940="" id="1" data-time="1560336942459" class="group/entry">
     <div data-v-cf9ff940="" class="relative flex w-full items-start gap-x-2 group-[.compact]:items-stretch">
-      <div class="dropdown dropdown-start dropdown-hover font-sans group-[.compact]:absolute group-[.compact]:-left-0.5"><button tabindex="0" class="btn btn-square btn-ghost btn-xs -mr-1 -ml-3 opacity-0 group-hover/entry:opacity-100"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
+      <div class="dropdown dropdown-start dropdown-hover absolute -left-2 font-sans"><button tabindex="0" class="btn btn-square btn-xs border-base-content/20 bg-base-100 border opacity-0 shadow-sm group-hover/entry:opacity-90"><svg viewBox="0 0 512 512" width="1.2em" height="1.2em">
             <circle cx="256" cy="256" r="48" fill="currentColor"></circle>
             <circle cx="256" cy="416" r="48" fill="currentColor"></circle>
             <circle cx="256" cy="96" r="48" fill="currentColor"></circle>
           </svg></button>
-        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 -mr-1 -ml-3 w-52 border p-1 text-sm shadow-sm">
+        <ul tabindex="0" class="menu dropdown-content rounded-box bg-base-200 border-base-content/20 z-50 w-52 border p-1 text-sm shadow-sm">
           <!--v-if-->
           <!--v-if-->
           <!--v-if-->