From cffd4bd4e398abfda4d0c8da4ac0e69c0d9410de Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 24 Oct 2025 09:18:42 -0700
Subject: [PATCH] fix: fixes action menu being cut

---
 assets/components/LogViewer/LogActions.vue | 31 +++++++++++-----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/assets/components/LogViewer/LogActions.vue b/assets/components/LogViewer/LogActions.vue
index c011fb88..2072fd2d 100644
--- a/assets/components/LogViewer/LogActions.vue
+++ b/assets/components/LogViewer/LogActions.vue
@@ -132,26 +132,25 @@ function hideMenu(e: MouseEvent) {
   }
 }
 
-const dropdownRef = ref<HTMLElement | null>(null);
-const isDropdownTop = ref(false);
+const DROPDOWN_BOTTOM_THRESHOLD = 100;
+
+const dropdownRef = useTemplateRef<HTMLDivElement>("dropdownRef");
+const shouldShowAbove = ref(false);
 
 function checkDropdownPosition() {
   if (!dropdownRef.value) return;
+
   const rect = dropdownRef.value.getBoundingClientRect();
-  const kValue = 100; // this is can be manipulated to better fit when the dropdown position is changed.
-  const viewportHeight = window.innerHeight;
-  isDropdownTop.value = rect.bottom + kValue > viewportHeight;
+  shouldShowAbove.value = rect.bottom + DROPDOWN_BOTTOM_THRESHOLD > window.innerHeight;
 }
 
-const dropdownClass = computed(() => {
-  return [
-    "dropdown",
-    isDropdownTop.value ? "dropdown-top" : "dropdown-right",
-    "dropdown-hover",
-    "absolute",
-    "-left-2",
-    "z-10",
-    "font-sans",
-  ].join(" ");
-});
+const dropdownClass = computed(() => [
+  "dropdown",
+  "dropdown-hover",
+  "absolute",
+  "-left-2",
+  "z-10",
+  "font-sans",
+  shouldShowAbove.value ? "dropdown-top" : "dropdown-right",
+]);
 </script>