From 528405d1cbb609d734d6913fa2029ad7c1035143 Mon Sep 17 00:00:00 2001
From: stacksmash76 <98354295+stacksmash76@users.noreply.github.com>
Date: Sun, 10 Sep 2023 18:38:42 +0200
Subject: [PATCH] fix(web): floating "Import filter" dropdown button (#1102)

fix: incorrect z-height on "Import filter" dropdown button
---
 web/src/screens/filters/List.tsx | 96 ++++++++++++++++----------------
 1 file changed, 47 insertions(+), 49 deletions(-)

diff --git a/web/src/screens/filters/List.tsx b/web/src/screens/filters/List.tsx
index 603da75..9e2dda8 100644
--- a/web/src/screens/filters/List.tsx
+++ b/web/src/screens/filters/List.tsx
@@ -141,55 +141,53 @@ export function Filters() {
       <FilterAddForm isOpen={createFilterIsOpen} toggle={toggleCreateFilter} />
       <div className="my-6 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between">
         <h1 className="text-3xl font-bold text-black dark:text-white">Filters</h1>
-        <div className="relative">
-          <Menu>
-            {({ open }) => (
-              <>
-                <button
-                  className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-l-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
-                  onClick={(e: { stopPropagation: () => void; }) => {
-                    if (!open) {
-                      e.stopPropagation();
-                      toggleCreateFilter();
-                    }
-                  }}
-                >
-                  <PlusIcon className="h-5 w-5 mr-1" />
-                  Add Filter
-                </button>
-                <Menu.Button className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
-                  <ChevronDownIcon className="h-5 w-5" />
-                </Menu.Button>
-                <Transition
-                  show={open}
-                  enter="transition ease-out duration-100 transform"
-                  enterFrom="opacity-0 scale-95"
-                  enterTo="opacity-100 scale-100"
-                  leave="transition ease-in duration-75 transform"
-                  leaveFrom="opacity-100 scale-100"
-                  leaveTo="opacity-0 scale-95"
-                >
-                  <Menu.Items className="absolute right-0 mt-0.5 w-46 bg-white dark:bg-gray-700 rounded-md shadow-lg">
-                    <Menu.Item>
-                      {({ active }) => (
-                        <button
-                          type="button"
-                          className={`${active
-                              ? "bg-gray-50 dark:bg-gray-600"
-                              : ""
-                            } w-full text-left py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500`}
-                          onClick={() => setShowImportModal(true)}
-                        >
-                          Import Filter
-                        </button>
-                      )}
-                    </Menu.Item>
-                  </Menu.Items>
-                </Transition>
-              </>
-            )}
-          </Menu>
-        </div>
+        <Menu as="div" className="relative">
+          {({ open }) => (
+            <>
+              <button
+                className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-l-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
+                onClick={(e: { stopPropagation: () => void; }) => {
+                  if (!open) {
+                    e.stopPropagation();
+                    toggleCreateFilter();
+                  }
+                }}
+              >
+                <PlusIcon className="h-5 w-5 mr-1" />
+                Add Filter
+              </button>
+              <Menu.Button className="relative inline-flex items-center px-2 py-2 border-l border-spacing-1 dark:border-black shadow-sm text-sm font-medium rounded-r-md text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500">
+                <ChevronDownIcon className="h-5 w-5" />
+              </Menu.Button>
+              <Transition
+                show={open}
+                as={Fragment}
+                enter="transition ease-out duration-100 transform"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="transition ease-in duration-75 transform"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Menu.Items className="absolute z-10 right-0 mt-0.5 w-46 bg-white dark:bg-gray-700 rounded-md shadow-lg">
+                  <Menu.Item>
+                    {({ active }) => (
+                      <button
+                        type="button"
+                        className={classNames(
+                          active ? "bg-gray-50 dark:bg-gray-600" : "",
+                          "w-full text-left py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500")}
+                        onClick={() => setShowImportModal(true)}
+                      >
+                        Import Filter
+                      </button>
+                    )}
+                  </Menu.Item>
+                </Menu.Items>
+              </Transition>
+            </>
+          )}
+        </Menu>
       </div>
 
       {showImportModal && (