From a87908d957803408888ee77f6fef734ecda81a38 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 17 Jun 2025 16:06:08 -0700
Subject: [PATCH] fix: fixes z-index on some menu and improves scroll progress
 fading (#3989)

---
 .../ContainerViewer/ContainerActionsToolbar.vue      | 12 ++++++------
 assets/components/LogViewer/LogActions.vue           |  2 +-
 assets/components/LogViewer/LogList.vue              |  4 ++++
 .../LogViewer/MultiContainerActionToolbar.vue        |  6 +++---
 .../LogViewer/__snapshots__/EventSource.spec.ts.snap |  6 +++---
 assets/components/ScrollProgress.vue                 |  2 +-
 assets/components/common/RelativeTime.vue            |  2 +-
 7 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/assets/components/ContainerViewer/ContainerActionsToolbar.vue b/assets/components/ContainerViewer/ContainerActionsToolbar.vue
index de156c6f..d43cc7cd 100644
--- a/assets/components/ContainerViewer/ContainerActionsToolbar.vue
+++ b/assets/components/ContainerViewer/ContainerActionsToolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown dropdown-end dropdown-hover">
+  <div class="dropdown dropdown-end dropdown-hover z-20">
     <label tabindex="0" class="btn btn-ghost btn-sm w-10 gap-0.5 px-2">
       <carbon:circle-solid class="text-red w-2.5" v-if="streamConfig.stderr" />
       <carbon:circle-solid class="text-blue w-2.5" v-if="streamConfig.stdout" />
@@ -10,7 +10,7 @@
       @click="hideMenu"
     >
       <li v-if="!historical">
-        <a @click.prevent="clear()">
+        <a @click="clear()">
           <octicon:trash-24 /> {{ $t("toolbar.clear") }}
           <KeyShortcut char="k" :modifiers="['shift', 'meta']" />
         </a>
@@ -19,13 +19,13 @@
         <a :href="downloadUrl" download> <octicon:download-24 /> {{ $t("toolbar.download") }} </a>
       </li>
       <li v-if="!historical">
-        <a @click.prevent="showSearch = true">
+        <a @click="showSearch = true">
           <mdi:magnify /> {{ $t("toolbar.search") }}
           <KeyShortcut char="f" />
         </a>
       </li>
       <li v-if="hasComplexLogs">
-        <a @click.prevent="showDrawer(LogAnalytics, { container }, 'lg')">
+        <a @click="showDrawer(LogAnalytics, { container }, 'lg')">
           <ph:file-sql /> SQL Analytics
           <KeyShortcut char="f" :modifiers="['shift', 'meta']" />
         </a>
@@ -142,14 +142,14 @@
       <template v-if="enableShell && !historical">
         <li class="line"></li>
         <li>
-          <a @click.prevent="showDrawer(Terminal, { container, action: 'attach' }, 'lg')">
+          <a @click="showDrawer(Terminal, { container, action: 'attach' }, 'lg')">
             <ri:terminal-window-fill />
             {{ $t("toolbar.attach") }}
             <KeyShortcut char="a" :modifiers="['shift', 'meta']" />
           </a>
         </li>
         <li>
-          <a @click.prevent="showDrawer(Terminal, { container, action: 'exec' }, 'lg')">
+          <a @click="showDrawer(Terminal, { container, action: 'exec' }, 'lg')">
             <material-symbols:terminal />
             {{ $t("toolbar.shell") }}
             <KeyShortcut char="e" :modifiers="['shift', 'meta']" />
diff --git a/assets/components/LogViewer/LogActions.vue b/assets/components/LogViewer/LogActions.vue
index 2d8a17dd..a265903d 100644
--- a/assets/components/LogViewer/LogActions.vue
+++ b/assets/components/LogViewer/LogActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown dropdown-start dropdown-hover absolute -left-2 font-sans" v-show="container">
+  <div class="dropdown dropdown-start dropdown-hover absolute -left-2 z-10 font-sans" v-show="container">
     <router-link
       v-if="isSearching"
       @click="resetSearch()"
diff --git a/assets/components/LogViewer/LogList.vue b/assets/components/LogViewer/LogList.vue
index a8a186c9..4ab22031 100644
--- a/assets/components/LogViewer/LogList.vue
+++ b/assets/components/LogViewer/LogList.vue
@@ -26,6 +26,7 @@ const { containers } = useLoggingContext();
 
 const list = ref<HTMLElement[]>([]);
 
+let previousDate = new Date();
 useIntersectionObserver(
   list,
   (entries) => {
@@ -36,9 +37,12 @@ useIntersectionObserver(
         const time = entry.target.getAttribute("data-time");
         if (time) {
           const date = new Date(parseInt(time));
+          if (+date === +previousDate) break;
+          previousDate = date;
           const diff = new Date().getTime() - container.created.getTime();
           progress.value = (date.getTime() - container.created.getTime()) / diff;
           currentDate.value = date;
+          break;
         }
       }
     }
diff --git a/assets/components/LogViewer/MultiContainerActionToolbar.vue b/assets/components/LogViewer/MultiContainerActionToolbar.vue
index 1fd53b11..8fabb6ea 100644
--- a/assets/components/LogViewer/MultiContainerActionToolbar.vue
+++ b/assets/components/LogViewer/MultiContainerActionToolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown dropdown-end dropdown-hover">
+  <div class="dropdown dropdown-end dropdown-hover z-20">
     <label tabindex="0" class="btn btn-ghost btn-sm gap-0.5 px-2">
       <carbon:circle-solid class="text-red w-2.5" v-if="streamConfig.stderr" />
       <carbon:circle-solid class="text-blue w-2.5" v-if="streamConfig.stdout" />
@@ -10,7 +10,7 @@
       @click="hideMenu"
     >
       <li>
-        <a @click.prevent="clear()">
+        <a @click="clear()">
           <octicon:trash-24 /> {{ $t("toolbar.clear") }}
           <KeyShortcut char="k" :modifiers="['shift', 'meta']" />
         </a>
@@ -19,7 +19,7 @@
         <a :href="downloadUrl" download> <octicon:download-24 /> {{ $t("toolbar.download") }} </a>
       </li>
       <li>
-        <a @click.prevent="showSearch = true">
+        <a @click="showSearch = true">
           <mdi:magnify /> {{ $t("toolbar.search") }}
           <KeyShortcut char="f" />
         </a>
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index a6099feb..82c237d1 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -7,7 +7,7 @@ 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 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">
+      <div class="dropdown dropdown-start dropdown-hover absolute -left-2 z-10 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>
@@ -41,7 +41,7 @@ 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 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">
+      <div class="dropdown dropdown-start dropdown-hover absolute -left-2 z-10 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>
@@ -75,7 +75,7 @@ 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 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">
+      <div class="dropdown dropdown-start dropdown-hover absolute -left-2 z-10 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>
diff --git a/assets/components/ScrollProgress.vue b/assets/components/ScrollProgress.vue
index dc4232e8..ddee4657 100644
--- a/assets/components/ScrollProgress.vue
+++ b/assets/components/ScrollProgress.vue
@@ -93,7 +93,7 @@ svg {
 }
 
 .fadeout-leave-active {
-  @apply transition-opacity;
+  @apply transition-opacity duration-400;
 }
 
 .fadeout-leave-to {
diff --git a/assets/components/common/RelativeTime.vue b/assets/components/common/RelativeTime.vue
index 5df3e271..5b9fdf18 100644
--- a/assets/components/common/RelativeTime.vue
+++ b/assets/components/common/RelativeTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <time :datetime="date.toISOString()" data-ci-skip>{{ text }}</time>
+  <time :datetime="date.toISOString()">{{ text }}</time>
 </template>
 
 <script lang="ts" setup>