From 01c891b90364c82be6571c73d349f067bf1e7893 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Thu, 24 Jul 2025 11:25:34 -0500
Subject: [PATCH] Enhance dropdown component by adding overflow handling and
 improving search input styling for better usability.

---
 .../fragments/_dropdown_fragment.html         | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/inventory/templates/fragments/_dropdown_fragment.html b/inventory/templates/fragments/_dropdown_fragment.html
index 46583af..b5eb919 100644
--- a/inventory/templates/fragments/_dropdown_fragment.html
+++ b/inventory/templates/fragments/_dropdown_fragment.html
@@ -8,17 +8,19 @@
         {% endif %}
     </label>
     <div class="dropdown">
-        <button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown"
+        <button class="btn btn-outline-dark dropdown-toggle w-100 overflow-x-hidden" type="button" data-bs-toggle="dropdown"
             data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button"{% if not enabled %} disabled{% endif %}
             style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
             {{ current_item.identifier if current_item else '-' }}
         </button>
         <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
-        <ul class="dropdown-menu w-100" id="menu{{ id }}">
-            <input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
-            {% for item in list %}
-                <li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
-            {% endfor %}
+        <ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
+            <input type="text" class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0" id="search{{ id }}" placeholder="Search...">
+            <div class="overflow-auto overflow-x-hidden" style="max-height: 35vh; z-index: 9999;" id="{{ id }}DropdownContent">
+                {% for item in list %}
+                    <li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
+                {% endfor %}
+            </div>
         </ul>
     </div>
     <script>
@@ -34,15 +36,25 @@
         document.addEventListener("DOMContentLoaded", () => {
             const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
             const {{ id }}Input = document.getElementById("{{ id }}");
+            const {{ id }}SearchInput = document.getElementById("search{{ id }}");
+            const {{ id }}DropdownContent = document.getElementById("{{ id }}DropdownContent");
+            const {{ id }}Button = document.getElementById("{{ id }}Button");
+
+            {{ id }}Button.addEventListener("shown.bs.dropdown", () => {
+                const menuHeight = {{ id }}Dropdown.clientHeight;
+                const inputHeight = {{ id }}SearchInput.offsetHeight;
+                const availableHeight = menuHeight - inputHeight;
+
+                {{ id }}DropdownContent.style.maxHeight = availableHeight + "px";
+                console.log("Dropdown content max height set to:", availableHeight + "px");
+            });
 
             {{ id }}Dropdown.addEventListener("click", (e) => {
                 if (e.target.tagName === "A") {
                     {{ id }}Input.value = e.target.dataset.invValue;
-                    console.log("Selected {{ id }} ID:", {{ id }}Input.value);
                 }
             });
 
-            const {{ id }}SearchInput = document.getElementById("search{{ id }}");
             console.log({{ id }}SearchInput);
             {{ id }}SearchInput.addEventListener("input", () => {
                 const filter = {{ id }}SearchInput.value.toLowerCase();