diff --git a/components/content/Thread.tsx b/components/content/Thread.tsx
index 3f370a3c..c2b0c8cf 100644
--- a/components/content/Thread.tsx
+++ b/components/content/Thread.tsx
@@ -104,17 +104,18 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread }: ThreadP
   const calculatePosition = () => {
     if (triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect()
-      const popupWidth = 355 // Adjust this value based on your actual popup width
+      console.log(rect)
+      const popupWidth = 355
       const viewportWidth = window.innerWidth
 
-      let leftPosition = rect.right + 10 // Position to the right of the thread
+      let leftPosition = rect.left + 40
       if (leftPosition + popupWidth > viewportWidth) {
-        // If the popup overflows the viewport, adjust to the left
+        // if the popup is going to expand the viewport then we move it to the left
         leftPosition = rect.left - popupWidth - 10
       }
 
       setPopupPosition({
-        top: rect.top + window.scrollY, // Account for vertical scroll
+        top: rect.top + window.scrollY,
         left: leftPosition,
       })
     }
@@ -124,7 +125,7 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread }: ThreadP
     if (active) {
       calculatePosition() // Calculate the position when the popup is active
     }
-  }, [active]) // Recalculate when the active state changes
+  }, [active])
 
   const sortedComments = useMemo(() => {
     if (!commentThread) return []
@@ -207,12 +208,12 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread }: ThreadP
 
   const renderPopup = () => {
     if (!active) return null
-
+    console.log(popupPosition)
     return createPortal(
       <div
         ref={popupRef}
         className="absolute w-[355px] border border-gray-200 rounded-lg bg-slate-50 dark:bg-slate-900 dark:border-gray-700 z-50"
-        style={{ top: `${popupPosition.top}px`, left: `${popupPosition.left}px` }} // Apply calculated position
+        style={{ top: `${popupPosition.top}px`, left: `${popupPosition.left}px` }}
         data-cy={`Thread:${threadId}:Main`}
       >
         <div className="absolute -top-1 left-0 not-prose">
@@ -243,7 +244,7 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread }: ThreadP
         <div className={`flex items-center justify-between rounded-t-lg`}>
           <h3 className="w-full mx-2 my-0 text-base text-slate-100 dark:text-slate-900">{}</h3>
           <Stack direction="row-reverse">
-            <TinyButton onClick={() => setActive(false)}>
+            <TinyButton data-cy={`Thread:${threadId}:CloseButton`} onClick={() => setActive(false)}>
               <IoClose />
             </TinyButton>
             {!isPlaceholder && (
diff --git a/cypress/component/CommentThread.cy.tsx b/cypress/component/CommentThread.cy.tsx
index ace674c1..80af89ba 100644
--- a/cypress/component/CommentThread.cy.tsx
+++ b/cypress/component/CommentThread.cy.tsx
@@ -106,8 +106,8 @@ describe("CommentThread component", () => {
       )
     })
 
-    it("should open and close the thread", () => {
-      cy.get('[data-cy="Thread:1:OpenCloseButton"]').click()
+    it("should close the thread", () => {
+      cy.get('[data-cy="Thread:1:CloseButton"]').click()
       cy.get("@setActive").should("be.calledWith", false)
     })