From 9e7de63f26076ae696f1bb0d675e11e87a429fb8 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sat, 25 Oct 2025 13:03:21 -0700
Subject: [PATCH] fix: fixes dropdown placement. (#4217)

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

diff --git a/assets/components/LogViewer/LogActions.vue b/assets/components/LogViewer/LogActions.vue
index 2072fd2d..08fe9e04 100644
--- a/assets/components/LogViewer/LogActions.vue
+++ b/assets/components/LogViewer/LogActions.vue
@@ -1,5 +1,11 @@
 <template>
-  <div :class="dropdownClass" v-show="container" ref="dropdownRef" @mouseenter="checkDropdownPosition">
+  <div
+    class="dropdown dropdown-hover absolute -left-2 z-10 font-sans"
+    :class="shouldShowBelow ? 'dropdown-right' : 'dropdown-right dropdown-end'"
+    v-show="container"
+    ref="dropdownRef"
+    @mouseenter="checkDropdownPosition"
+  >
     <router-link
       v-if="isSearching"
       @click="resetSearch()"
@@ -65,7 +71,6 @@ import stripAnsi from "strip-ansi";
 import { Container } from "@/models/Container";
 import { LogEntry, SimpleLogEntry, ComplexLogEntry, JSONObject } from "@/models/LogEntry";
 import LogDetails from "./LogDetails.vue";
-import { ref, computed } from "vue";
 
 const { logEntry, container } = defineProps<{
   logEntry: LogEntry<string | JSONObject>;
@@ -132,25 +137,13 @@ function hideMenu(e: MouseEvent) {
   }
 }
 
-const DROPDOWN_BOTTOM_THRESHOLD = 100;
-
 const dropdownRef = useTemplateRef<HTMLDivElement>("dropdownRef");
-const shouldShowAbove = ref(false);
+const shouldShowBelow = ref(false);
 
 function checkDropdownPosition() {
   if (!dropdownRef.value) return;
 
   const rect = dropdownRef.value.getBoundingClientRect();
-  shouldShowAbove.value = rect.bottom + DROPDOWN_BOTTOM_THRESHOLD > window.innerHeight;
+  shouldShowBelow.value = rect.top < 150;
 }
-
-const dropdownClass = computed(() => [
-  "dropdown",
-  "dropdown-hover",
-  "absolute",
-  "-left-2",
-  "z-10",
-  "font-sans",
-  shouldShowAbove.value ? "dropdown-top" : "dropdown-right",
-]);
 </script>
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index 49a95581..4cf2b3d6 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-hover absolute -left-2 z-10 font-sans dropdown-right"><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-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><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-hover absolute -left-2 z-10 font-sans dropdown-right"><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-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><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-hover absolute -left-2 z-10 font-sans dropdown-right"><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-hover absolute -left-2 z-10 font-sans dropdown-right dropdown-end"><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>