fixed overlapping

frontend/src/components/ShareButton.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import ShareIcon from '../assets/share.svg';
+import { ShareConversationModal } from '../modals/ShareConversationModal';
+
+type ShareButtonProps = {
+  conversationId: string;
+};
+
+export default function ShareButton({ conversationId }: ShareButtonProps) {
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
+  return (
+    <>
+      <button
+        title="Share"
+        onClick={() => {
+          setShareModalState(true);
+        }}
+        className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+      >
+        <img
+          className="m-2 h-5 w-5 filter dark:invert"
+          alt="share"
+          src={ShareIcon}
+        />
+      </button>
+      {isShareModalOpen && (
+        <ShareConversationModal
+          close={() => {
+            setShareModalState(false);
+          }}
+          conversationId={conversationId}
+        />
+      )}
+    </>
+  );
+}