Fixed Issue #3072 (#3201)

Fixed Issue #3072.

By adding containerRef prop to the Portal element.


Issue (div will come at the top of the screen as Portal renders outside
the DOM) :--



https://github.com/LAION-AI/Open-Assistant/assets/91950158/2ec0634b-e1ad-4dfd-977f-c84ed682773c


Solution (Making the Portal relative by giving the reference to its
parent div using useRef) :--



https://github.com/LAION-AI/Open-Assistant/assets/91950158/a6146129-bd74-423f-aa6c-f842355c85dc

Co-authored-by: Aditya <Aditya@livwell.com>

website/src/components/Chat/ChatListItem.tsx

@@ -49,6 +49,7 @@ export const ChatListItem = ({
   const [isEditing, setIsEditing] = useBoolean(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const rootRef = useRef<HTMLDivElement>(null);
+  const containerElementRef = useRef<HTMLDivElement>(null);
 
   useOutsideClick({ ref: rootRef, handler: setIsEditing.off });
 
@@ -105,6 +106,7 @@ export const ChatListItem = ({
           me={isActive ? "32px" : undefined}
           textOverflow="clip"
           as="span"
+          ref={containerElementRef}
         >
           {chat.title ?? t("empty")}
         </Box>
@@ -160,7 +162,7 @@ export const ChatListItem = ({
                 <MenuButton>
                   <ChatListItemIconButton label={t("more_actions")} icon={MoreHorizontal} />
                 </MenuButton>
-                <Portal>
+                <Portal containerRef={containerElementRef}>
                   {/* higher z-index so that it is displayed over the mobile sidebar */}
                   <MenuList zIndex="var(--chakra-zIndices-popover)">
                     <OptOutDataButton chatId={chat.id} />