From 5f7734bf36b4295850054fed12869de9e115f13c Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:39:52 +0100
Subject: [PATCH] Fixed comments dropdown menu being cutoff by iframe (#21555)

REF https://linear.app/ghost/issue/PLG-255/dropdown-cut-off-by-iframe
- Avoided menu cutoff by positioning the dropdown of the last comment
above the MoreButton
---
 .../src/components/content/Content.tsx        |  2 +-
 .../components/content/buttons/MoreButton.tsx | 16 +++++++------
 .../context-menus/CommentContextMenu.tsx      | 24 +++++++++++++------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/apps/comments-ui/src/components/content/Content.tsx b/apps/comments-ui/src/components/content/Content.tsx
index 97b4adff9d..99f798dd49 100644
--- a/apps/comments-ui/src/components/content/Content.tsx
+++ b/apps/comments-ui/src/components/content/Content.tsx
@@ -63,7 +63,7 @@ const Content = () => {
                         </span>
                     </div>
                 )}
-                <div className={!pagination ? 'z-10 mt-4' : 'z-10'} data-test="comment-elements">
+                <div className="z-10" data-test="comment-elements">
                     {commentsElements}
                 </div>
                 <Pagination />
diff --git a/apps/comments-ui/src/components/content/buttons/MoreButton.tsx b/apps/comments-ui/src/components/content/buttons/MoreButton.tsx
index e0233cb05e..0b63d0e844 100644
--- a/apps/comments-ui/src/components/content/buttons/MoreButton.tsx
+++ b/apps/comments-ui/src/components/content/buttons/MoreButton.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 const MoreButton: React.FC<Props> = ({comment, toggleEdit}) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
-    const {member, admin} = useAppContext();
+    const {member, admin, pagination, comments} = useAppContext();
     const isAdmin = !!admin;
 
     const toggleContextMenu = () => {
@@ -21,10 +21,10 @@ const MoreButton: React.FC<Props> = ({comment, toggleEdit}) => {
         setIsContextMenuOpen(false);
     };
 
-    /*
-     * Whether we have at least one action inside the context menu
-     * (to hide the 'more' icon if we don't have any actions)
-    */
+    // Check if this is the last comment and there's no more pagination
+    const isLastComment = (!pagination || pagination.total <= pagination.page * pagination.limit) && 
+                         comments[comments.length - 1]?.id === comment.id;
+
     const show = (!!member && comment.status === 'published') || isAdmin;
 
     if (!show) {
@@ -33,8 +33,10 @@ const MoreButton: React.FC<Props> = ({comment, toggleEdit}) => {
 
     return (
         <div data-testid="more-button">
-            <button className="outline-0" type="button" onClick={toggleContextMenu}><MoreIcon className={`duration-50 gh-comments-icon gh-comments-icon-more outline-0 transition ease-linear hover:fill-black/75 dark:hover:fill-white/75 ${isContextMenuOpen ? 'fill-black/75 dark:fill-white/75' : 'fill-black/50 dark:fill-white/60'}`} /></button>
-            {isContextMenuOpen ? <CommentContextMenu close={closeContextMenu} comment={comment} toggleEdit={toggleEdit} /> : null}
+            <button className="outline-0" type="button" onClick={toggleContextMenu}>
+                <MoreIcon className={`duration-50 gh-comments-icon gh-comments-icon-more outline-0 transition ease-linear hover:fill-black/75 dark:hover:fill-white/75 ${isContextMenuOpen ? 'fill-black/75 dark:fill-white/75' : 'fill-black/50 dark:fill-white/60'}`} />
+            </button>
+            {isContextMenuOpen ? <CommentContextMenu close={closeContextMenu} comment={comment} isLastComment={isLastComment} toggleEdit={toggleEdit} /> : null}
         </div>
     );
 };
diff --git a/apps/comments-ui/src/components/content/context-menus/CommentContextMenu.tsx b/apps/comments-ui/src/components/content/context-menus/CommentContextMenu.tsx
index 09ab69956b..75da705ec8 100644
--- a/apps/comments-ui/src/components/content/context-menus/CommentContextMenu.tsx
+++ b/apps/comments-ui/src/components/content/context-menus/CommentContextMenu.tsx
@@ -1,20 +1,22 @@
 import AdminContextMenu from './AdminContextMenu';
 import AuthorContextMenu from './AuthorContextMenu';
 import NotAuthorContextMenu from './NotAuthorContextMenu';
-import {Comment, useAppContext} from '../../../AppContext';
+import {Comment, useAppContext, useLabs} from '../../../AppContext';
 import {useEffect, useRef} from 'react';
 
 type Props = {
     comment: Comment;
     close: () => void;
     toggleEdit: () => void;
+    isLastComment?: boolean;
 };
-const CommentContextMenu: React.FC<Props> = ({comment, close, toggleEdit}) => {
+const CommentContextMenu: React.FC<Props> = ({comment, close, toggleEdit, isLastComment}) => {
     const {member, admin} = useAppContext();
     const isAuthor = member && comment.member?.uuid === member?.uuid;
     const isAdmin = !!admin;
     const element = useRef<HTMLDivElement>(null);
-
+    const labs = useLabs();
+    
     useEffect(() => {
         const listener = () => {
             close();
@@ -76,11 +78,19 @@ const CommentContextMenu: React.FC<Props> = ({comment, close, toggleEdit}) => {
     }
 
     return (
-        <div ref={element} onClick={stopPropagation}>
-            <div className="absolute z-10 min-w-min whitespace-nowrap rounded bg-white py-3 pl-4 pr-8 font-sans text-sm shadow-lg outline-0 sm:min-w-36 dark:bg-neutral-800 dark:text-white">
-                {contextMenu}
+        labs.commentImprovements ? (
+            <div ref={element} className="relative" onClick={stopPropagation}>
+                <div className={`absolute z-10 min-w-min whitespace-nowrap rounded bg-white py-3 pl-4 pr-8 font-sans text-sm shadow-lg outline-0 sm:min-w-36 dark:bg-neutral-800 dark:text-white ${isLastComment ? 'bottom-full mb-6' : 'top-0'}`}>
+                    {contextMenu}
+                </div>
             </div>
-        </div>
+        ) : (
+            <div ref={element} onClick={stopPropagation}>
+                <div className="absolute z-10 min-w-min whitespace-nowrap rounded bg-white py-3 pl-4 pr-8 font-sans text-sm shadow-lg outline-0 sm:min-w-36 dark:bg-neutral-800 dark:text-white">
+                    {contextMenu}
+                </div>
+            </div>
+        )
     );
 };