From 7b030bee43115ed9fbc86673cecdfe9cc4136517 Mon Sep 17 00:00:00 2001
From: Jason Fisher <jason.fishe@fotoware.com>
Date: Fri, 13 Dec 2024 01:24:51 +0100
Subject: [PATCH] Issue #304 fix

---
 .../pages/invoices/dashboard/_fetch_body.html      | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/templates/pages/invoices/dashboard/_fetch_body.html b/frontend/templates/pages/invoices/dashboard/_fetch_body.html
index c2c4a1926..01886bbf8 100644
--- a/frontend/templates/pages/invoices/dashboard/_fetch_body.html
+++ b/frontend/templates/pages/invoices/dashboard/_fetch_body.html
@@ -46,11 +46,15 @@
             <td colspan="2"
                 onclick="const e = arguments[0] || window.event; e.stopPropagation();"
                 class="cursor-default">
-                {# The if statement for dropdown top goes as follows #}
-                {# Use dropdown on top if these: #}
-                {# - is last item           (and not first item) (and more than 4 items) #}
-                <!-- Only last two invoices need a dropup -->
-                <div class="dropdown dropdown-left {% if forloop.counter0 > 3 %}dropdown-top{% endif %}">
+                <div class="dropdown dropdown-left" x-data="{ openUp: false }" x-init="() => {
+                    const checkDropdownPosition = () => {
+                        const rect = $el.getBoundingClientRect();
+                        const dropdownHeight = $el.querySelector('.dropdown-content').offsetHeight;
+                        openUp = (rect.bottom + dropdownHeight) > window.innerHeight || (rect.top - dropdownHeight) < 0;
+                    };
+                    checkDropdownPosition();
+                    window.addEventListener('scroll', checkDropdownPosition);
+                }" :class="{ 'dropdown-top': openUp }">
                     <label tabindex="0" class="btn btn-primary btn-outline btn-sm">
                         <i class="fa-solid fa-ellipsis-vertical"></i>
                     </label>