From 1078132b1230744345c6a4a88b13ee2d67636349 Mon Sep 17 00:00:00 2001
From: Tiefseemonster <118022040+dmitriisurmin@users.noreply.github.com>
Date: Wed, 30 Nov 2022 13:18:39 +0100
Subject: [PATCH] fix: member menu dropdown position (#639)

* fix: member menu dropdown position

* chore: cleanup

* chore: cleanup
---
 web/src/components/Settings/MemberSection.tsx | 1 +
 web/src/components/common/Dropdown.tsx        | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
index 52a047934..d7f15649e 100644
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@@ -193,6 +193,7 @@ const PreferencesSection = () => {
             ) : (
               <Dropdown
                 actionsClassName="!w-24"
+                positionClassName="bottom-full right-0 mb-1"
                 actions={
                   <>
                     <button
diff --git a/web/src/components/common/Dropdown.tsx b/web/src/components/common/Dropdown.tsx
index 283ac42d5..b8bfba534 100644
--- a/web/src/components/common/Dropdown.tsx
+++ b/web/src/components/common/Dropdown.tsx
@@ -7,10 +7,11 @@ interface Props {
   actions?: ReactNode;
   className?: string;
   actionsClassName?: string;
+  positionClassName?: string;
 }
 
 const Dropdown: React.FC<Props> = (props: Props) => {
-  const { trigger, actions, className, actionsClassName } = props;
+  const { trigger, actions, className, actionsClassName, positionClassName } = props;
   const [dropdownStatus, toggleDropdownStatus] = useToggle(false);
   const dropdownWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -42,9 +43,9 @@ const Dropdown: React.FC<Props> = (props: Props) => {
         </button>
       )}
       <div
-        className={`w-auto mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white dark:bg-zinc-700 z-1 p-1 rounded-md shadow ${
+        className={`w-auto absolute flex flex-col justify-start items-start bg-white dark:bg-zinc-700 z-10 p-1 rounded-md shadow ${
           actionsClassName ?? ""
-        } ${dropdownStatus ? "" : "!hidden"}`}
+        } ${dropdownStatus ? "" : "!hidden"} ${positionClassName ?? "top-full right-0 mt-1"}`}
       >
         {actions}
       </div>