From 4fdf6a7ffe22f9fccb4c0f081cd01051174ecdb8 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Mon, 9 Dec 2024 15:23:15 -0800
Subject: [PATCH] ui: Fix placement of tags menu under tags input with
 Bootstrap 5

- During the placement computation for the drop down menu, the height of the
dropdown-menu is very high and that leads to it getting placed at the top of the
page instead of the below the search element.

- To avoid the problem, cap the height of the dropdown. Somehow, the original
calculation for the height using CSS calc() does not seem to working as
expected.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
---
 plinth/templates/apps.html         | 2 +-
 static/themes/default/css/main.css | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/plinth/templates/apps.html b/plinth/templates/apps.html
index 8fdbb759f..70c6b6596 100644
--- a/plinth/templates/apps.html
+++ b/plinth/templates/apps.html
@@ -28,7 +28,7 @@
                  data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                  autocomplete="off" placeholder="{% trans "Search with tags" %}">
           <div class="dropdown-menu" aria-labelledby="add-tag-input">
-            <ul class="dropdown-items list-unstyled">
+            <ul class="dropdown-items">
               {% for tag in all_tags %}
                 {% if tag not in tags %}
                   <li class="dropdown-item" data-tag="{{ tag }}"
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 8eaf8dbde..5fc09428d 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -379,8 +379,13 @@ html {
 
 /* dropdown-menu for tags is a scrollable list */
 .tag-input .dropdown-menu {
-    bottom: calc(-100% - 10px);
     overflow-y: auto;
+    max-height: 15rem;
+}
+
+.tag-input .dropdown-menu > ul {
+    list-style: none;
+    margin-bottom: 0;
 }
 
 @media (min-width: 768px) {