diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/CommentThread.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/CommentThread.tsx
index 1c56c5a4875..ebf55e293c4 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/CommentThread.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/CommentThread.tsx
@@ -14,121 +14,123 @@ import { useOvermind } from 'app/overmind';
 import { formatDistance } from 'date-fns';
 import React from 'react';
 
-export const CommentThread = React.memo<{ commentThread: TCommentThread }>(
-  ({ commentThread }) => {
-    const { state, actions } = useOvermind();
+export const CommentThread = React.memo<{
+  commentThread: TCommentThread;
+  innerRef: React.RefObject<any>;
+}>(({ commentThread, innerRef }) => {
+  const { state, actions } = useOvermind();
 
-    const truncateText = {
-      maxHeight: 52,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      maxWidth: '100%',
-      display: 'block',
-      // @ts-ignore
-      // eslint-disable-next-line no-dupe-keys
-      display: '-webkit-box',
-      '-webkit-line-clamp': '3',
-      '-webkit-box-orient': 'vertical',
-    };
+  const truncateText = {
+    maxHeight: 52,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+    display: 'block',
+    // @ts-ignore
+    // eslint-disable-next-line no-dupe-keys
+    display: '-webkit-box',
+    '-webkit-line-clamp': '3',
+    '-webkit-box-orient': 'vertical',
+  };
 
-    return (
-      <ListAction
-        key={commentThread.id}
-        paddingTop={4}
-        css={css({
-          display: 'block',
-          color: 'inherit',
-          transition: 'opacity',
-          transitionDuration: theme => theme.speeds[1],
-          opacity: commentThread.isResolved ? 0.2 : 1,
-          paddingRight: 0, // the actions menu should be at the edge
-        })}
-      >
-        <Stack align="flex-start" justify="space-between" marginBottom={4}>
-          <Stack
-            gap={2}
-            align="center"
-            onClick={() => actions.editor.selectCommentThread(commentThread.id)}
-          >
-            <Avatar user={commentThread.initialComment.user} />
-            <Stack direction="vertical" justify="center">
-              <Link
-                size={3}
-                weight="bold"
-                href={`/u/${commentThread.initialComment.user.username}`}
-                variant="body"
-              >
-                {commentThread.initialComment.user.username}
-              </Link>
-              <Text size={2} variant="muted">
-                {formatDistance(
-                  new Date(commentThread.insertedAt),
-                  new Date(),
-                  {
-                    addSuffix: true,
-                  }
-                )}
-              </Text>
-            </Stack>
+  return (
+    <ListAction
+      ref={innerRef}
+      key={commentThread.id}
+      paddingTop={4}
+      css={css({
+        display: 'block',
+        color: 'inherit',
+        transition: 'opacity',
+        transitionDuration: theme => theme.speeds[1],
+        opacity: commentThread.isResolved ? 0.2 : 1,
+        paddingRight: 0, // the actions menu should be at the edge
+      })}
+      onClick={event => {
+        const target = event.target as HTMLElement;
+        // don't trigger comment if you click on the menu
+        // we have to handle this because of an upstream
+        // bug in reach/menu-button
+        if (target.tagName === 'button' || target.tagName === 'svg') {
+          return;
+        }
+
+        actions.editor.selectCommentThread(commentThread.id);
+      }}
+    >
+      <Stack align="flex-start" justify="space-between" marginBottom={4}>
+        <Stack gap={2} align="center">
+          <Avatar user={commentThread.initialComment.user} />
+          <Stack direction="vertical" justify="center">
+            <Link
+              size={3}
+              weight="bold"
+              href={`/u/${commentThread.initialComment.user.username}`}
+              variant="body"
+            >
+              {commentThread.initialComment.user.username}
+            </Link>
+            <Text size={2} variant="muted">
+              {formatDistance(new Date(commentThread.insertedAt), new Date(), {
+                addSuffix: true,
+              })}
+            </Text>
           </Stack>
-          <Stack align="center">
-            {commentThread.isResolved && (
-              <Icon name="check" title="Resolved" color="green" />
-            )}
-            <Menu>
-              <Menu.IconButton name="more" title="Comment actions" size={12} />
-              <Menu.List>
+        </Stack>
+        <Stack align="center">
+          {commentThread.isResolved && (
+            <Icon name="check" title="Resolved" color="green" />
+          )}
+          <Menu>
+            <Menu.IconButton name="more" title="Comment actions" size={12} />
+            <Menu.List>
+              <Menu.Item
+                onSelect={() =>
+                  actions.editor.resolveCommentThread({
+                    commentThreadId: commentThread.id,
+                    isResolved: !commentThread.isResolved,
+                  })
+                }
+              >
+                Mark as {commentThread.isResolved ? 'Unr' : 'r'}esolved
+              </Menu.Item>
+              <Menu.Item onSelect={() => {}}>Share Comment</Menu.Item>
+              {state.user.id === commentThread.initialComment.user.id && (
                 <Menu.Item
                   onSelect={() =>
-                    actions.editor.resolveCommentThread({
-                      commentThreadId: commentThread.id,
-                      isResolved: !commentThread.isResolved,
+                    actions.editor.deleteComment({
+                      threadId: commentThread.id,
+                      commentId: commentThread.initialComment.id,
                     })
                   }
                 >
-                  Mark as {commentThread.isResolved ? 'Unr' : 'r'}esolved
+                  Delete
                 </Menu.Item>
-                <Menu.Item onSelect={() => {}}>Share Comment</Menu.Item>
-                {state.user.id === commentThread.initialComment.user.id && (
-                  <Menu.Item
-                    onSelect={() =>
-                      actions.editor.deleteComment({
-                        threadId: commentThread.id,
-                        commentId: commentThread.initialComment.id,
-                      })
-                    }
-                  >
-                    Delete
-                  </Menu.Item>
-                )}
-              </Menu.List>
-            </Menu>
-          </Stack>
+              )}
+            </Menu.List>
+          </Menu>
         </Stack>
-        <Element
-          onClick={() => actions.editor.selectCommentThread(commentThread.id)}
-          as="p"
-          marginY={0}
-          marginRight={2 /** Adjust for the missing margin in ListAction */}
-          paddingBottom={
-            6 /** Use padding instead of margin for inset border */
-          }
-          css={css({
-            borderBottom: '1px solid',
-            borderColor: 'sideBar.border',
-          })}
-        >
-          <Text block css={truncateText} marginBottom={2}>
-            {commentThread.initialComment.content}
-          </Text>
-          <Text variant="muted" size={2}>
-            {getRepliesString(commentThread.comments.length)}
-          </Text>
-        </Element>
-      </ListAction>
-    );
-  }
-);
+      </Stack>
+      <Element
+        as="p"
+        marginY={0}
+        marginRight={2 /** Adjust for the missing margin in ListAction */}
+        paddingBottom={6 /** Use padding instead of margin for inset border */}
+        css={css({
+          borderBottom: '1px solid',
+          borderColor: 'sideBar.border',
+        })}
+      >
+        <Text block css={truncateText} marginBottom={2}>
+          {commentThread.initialComment.content}
+        </Text>
+        <Text variant="muted" size={2}>
+          {getRepliesString(commentThread.comments.length)}
+        </Text>
+      </Element>
+    </ListAction>
+  );
+});
 
 const getRepliesString = length => {
   if (length === 0) return 'No Replies';
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/Dialog/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/Dialog/index.tsx
index 8f41345d623..fb20f57a9af 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/Dialog/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/Dialog/index.tsx
@@ -16,6 +16,7 @@ import { formatDistance } from 'date-fns';
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import Draggable from 'react-draggable';
+import { motion } from 'framer-motion';
 
 import { Markdown } from './Markdown';
 import { Reply } from './Reply';
@@ -24,17 +25,13 @@ import { useScrollTop } from './use-scroll-top';
 export const CommentDialog = props =>
   ReactDOM.createPortal(<Dialog {...props} />, document.body);
 
-export const Dialog = props => {
+export const Dialog = ({ triggerRef }) => {
   const { state, actions } = useOvermind();
   const [value, setValue] = useState('');
 
   const [edit, setEdit] = useState(false);
   const thread = state.editor.currentCommentThread;
   const [editValue, setEditValue] = useState(thread.initialComment.content);
-  const [position, setPosition] = useState({
-    x: props.x || 200,
-    y: props.y || 40,
-  });
 
   const closeDialog = () => actions.editor.selectCommentThread(null);
   const onSubmit = () => {
@@ -49,6 +46,23 @@ export const Dialog = props => {
     }
   };
 
+  const [position, setPosition] = useState({ x: 400, y: 40 });
+  const OVERLAP_WITH_SIDEBAR = 20;
+  const OFFSET_FROM_SIDEBAR_COMMENT = 90;
+
+  const [animateFrom, setAnimateFrom] = React.useState({ x: 0, y: 0 });
+
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      const { left, right, top } = triggerRef.current.getBoundingClientRect();
+      setAnimateFrom({ x: left, y: top });
+      setPosition({
+        x: right - OVERLAP_WITH_SIDEBAR,
+        y: top - OFFSET_FROM_SIDEBAR_COMMENT,
+      });
+    }
+  }, [triggerRef]);
+
   const onDragStop = (_, data) => {
     setPosition({
       x: data.x,
@@ -58,202 +72,223 @@ export const Dialog = props => {
 
   const { ref: listRef, scrollTop } = useScrollTop();
 
+  // if trigger ref was passed but it's value hasn't
+  // been set yet, wait (return null) until it is set
+  if (triggerRef && !triggerRef.current) return null;
+
   return (
     <Draggable handle=".handle" position={position} onStop={onDragStop}>
-      <Stack
-        direction="vertical"
-        css={css({
-          position: 'absolute',
-          zIndex: 2,
-          backgroundColor: 'dialog.background',
-          color: 'dialog.foreground',
-          border: '1px solid',
-          borderColor: 'dialog.border',
-          borderRadius: 4,
-          width: 420,
-          height: 'auto',
-          maxHeight: '80vh',
-          fontFamily: 'Inter, sans-serif',
-          overflow: 'hidden',
-          boxShadow: 2,
-        })}
+      <motion.div
+        initial={{ ...animateFrom, scale: 0.5 }}
+        animate={{ ...position, scale: 1 }}
+        drag
+        dragMomentum={false}
+        transition={{ duration: 0.25 }}
+        style={{ position: 'absolute', zIndex: 2 }}
       >
         <Stack
-          className="handle"
-          align="center"
-          justify="space-between"
-          padding={4}
-          paddingRight={2}
-          marginBottom={2}
+          direction="vertical"
           css={css({
-            cursor: 'move',
+            position: 'absolute',
             zIndex: 2,
-            boxShadow: theme =>
-              scrollTop > 0
-                ? `0px 32px 32px ${theme.colors.dialog.background}`
-                : 'none',
+            backgroundColor: 'dialog.background',
+            color: 'dialog.foreground',
+            border: '1px solid',
+            borderColor: 'dialog.border',
+            borderRadius: 4,
+            width: 420,
+            height: 'auto',
+            maxHeight: '80vh',
+            fontFamily: 'Inter, sans-serif',
+            overflow: 'hidden',
+            boxShadow: 2,
           })}
         >
-          <Text size={3} weight="bold">
-            Comment
-          </Text>
-          <Stack align="center">
-            <IconButton
-              onClick={() =>
-                actions.editor.resolveCommentThread({
-                  commentThreadId: thread.id,
-                  isResolved: !thread.isResolved,
-                })
-              }
-              name="check"
-              size={14}
-              title="Resolve Comment"
-              css={css({
-                transition: 'color',
-                transitionDuration: theme => theme.speeds[1],
-                color: thread.isResolved ? 'green' : 'mutedForeground',
-              })}
-            />
-            <IconButton
-              name="cross"
-              size={10}
-              title="Close comment dialog"
-              onClick={closeDialog}
-            />
+          <Stack
+            className="handle"
+            align="center"
+            justify="space-between"
+            padding={4}
+            paddingRight={2}
+            marginBottom={2}
+            css={css({
+              cursor: 'move',
+              zIndex: 2,
+              boxShadow: theme =>
+                scrollTop > 0
+                  ? `0px 32px 32px ${theme.colors.dialog.background}`
+                  : 'none',
+            })}
+          >
+            <Text size={3} weight="bold">
+              Comment
+            </Text>
+            <Stack align="center">
+              <IconButton
+                onClick={() =>
+                  actions.editor.resolveCommentThread({
+                    commentThreadId: thread.id,
+                    isResolved: !thread.isResolved,
+                  })
+                }
+                name="check"
+                size={14}
+                title="Resolve Comment"
+                css={css({
+                  transition: 'color',
+                  transitionDuration: theme => theme.speeds[1],
+                  color: thread.isResolved ? 'green' : 'mutedForeground',
+                })}
+              />
+              <IconButton
+                name="cross"
+                size={10}
+                title="Close comment dialog"
+                onClick={closeDialog}
+              />
+            </Stack>
           </Stack>
-        </Stack>
 
-        {thread && (
-          <Stack direction="vertical" css={{ overflow: 'auto' }} ref={listRef}>
-            <Stack direction="vertical" gap={4}>
-              <Stack
-                align="flex-start"
-                justify="space-between"
-                marginLeft={4}
-                marginRight={2}
-              >
-                <Stack gap={2} align="center">
-                  <Avatar user={thread.initialComment.user} />
-                  <Stack direction="vertical" justify="center" gap={1}>
-                    <Link
-                      size={3}
-                      weight="bold"
-                      href={`/u/${thread.initialComment.user.username}`}
-                      variant="body"
-                    >
-                      {thread.initialComment.user.username}
-                    </Link>
-                    <Text size={2} variant="muted">
-                      {formatDistance(new Date(thread.insertedAt), new Date(), {
-                        addSuffix: true,
-                      })}
-                    </Text>
+          {thread && (
+            <Stack
+              direction="vertical"
+              css={{ overflow: 'auto' }}
+              ref={listRef}
+            >
+              <Stack direction="vertical" gap={4}>
+                <Stack
+                  align="flex-start"
+                  justify="space-between"
+                  marginLeft={4}
+                  marginRight={2}
+                >
+                  <Stack gap={2} align="center">
+                    <Avatar user={thread.initialComment.user} />
+                    <Stack direction="vertical" justify="center" gap={1}>
+                      <Link
+                        size={3}
+                        weight="bold"
+                        href={`/u/${thread.initialComment.user.username}`}
+                        variant="body"
+                      >
+                        {thread.initialComment.user.username}
+                      </Link>
+                      <Text size={2} variant="muted">
+                        {formatDistance(
+                          new Date(thread.insertedAt),
+                          new Date(),
+                          {
+                            addSuffix: true,
+                          }
+                        )}
+                      </Text>
+                    </Stack>
                   </Stack>
+                  {state.user.id === thread.initialComment.user.id && (
+                    <Stack align="center">
+                      <Menu>
+                        <Menu.IconButton
+                          name="more"
+                          title="Comment actions"
+                          size={12}
+                        />
+                        <Menu.List>
+                          <Menu.Item
+                            onSelect={() =>
+                              actions.editor.deleteComment({
+                                threadId: thread.id,
+                                commentId: thread.initialComment.id,
+                              })
+                            }
+                          >
+                            Delete
+                          </Menu.Item>
+                          <Menu.Item onSelect={() => setEdit(true)}>
+                            Edit Comment
+                          </Menu.Item>
+                        </Menu.List>
+                      </Menu>
+                    </Stack>
+                  )}
                 </Stack>
-                {state.user.id === thread.initialComment.user.id && (
-                  <Stack align="center">
-                    <Menu>
-                      <Menu.IconButton
-                        name="more"
-                        title="Comment actions"
-                        size={12}
-                      />
-                      <Menu.List>
-                        <Menu.Item
-                          onSelect={() =>
-                            actions.editor.deleteComment({
+                <Element
+                  as={edit ? 'div' : 'p'}
+                  marginY={0}
+                  marginX={4}
+                  paddingBottom={6}
+                  css={css({
+                    borderBottom: '1px solid',
+                    borderColor: 'sideBar.border',
+                  })}
+                >
+                  {!edit ? (
+                    <Markdown source={thread.initialComment.content} />
+                  ) : (
+                    <>
+                      <Element marginBottom={2}>
+                        <Textarea
+                          autosize
+                          value={editValue}
+                          onChange={e => setEditValue(e.target.value)}
+                        />
+                      </Element>
+                      <Element
+                        css={css({
+                          display: 'grid',
+                          gridTemplateColumns: '1fr 1fr',
+                          gridGap: 2,
+                        })}
+                      >
+                        <Button variant="link" onClick={() => setEdit(false)}>
+                          Cancel
+                        </Button>
+
+                        <Button
+                          disabled={!editValue}
+                          variant="secondary"
+                          onClick={async () => {
+                            await actions.editor.updateComment({
                               threadId: thread.id,
                               commentId: thread.initialComment.id,
-                            })
-                          }
+                              content: editValue,
+                            });
+                            setEdit(false);
+                          }}
                         >
-                          Delete
-                        </Menu.Item>
-                        <Menu.Item onSelect={() => setEdit(true)}>
-                          Edit Comment
-                        </Menu.Item>
-                      </Menu.List>
-                    </Menu>
-                  </Stack>
-                )}
+                          Save
+                        </Button>
+                      </Element>
+                    </>
+                  )}
+                </Element>
               </Stack>
-              <Element
-                as={edit ? 'div' : 'p'}
-                marginY={0}
-                marginX={4}
-                paddingBottom={6}
-                css={css({
-                  borderBottom: '1px solid',
-                  borderColor: 'sideBar.border',
+              <>
+                {thread.comments.map((reply, i) => {
+                  if (i === 0) return null;
+                  return <Reply reply={reply} threadId={thread.id} />;
                 })}
-              >
-                {!edit ? (
-                  <Markdown source={thread.initialComment.content} />
-                ) : (
-                  <>
-                    <Element marginBottom={2}>
-                      <Textarea
-                        autosize
-                        value={editValue}
-                        onChange={e => setEditValue(e.target.value)}
-                      />
-                    </Element>
-                    <Element
-                      css={css({
-                        display: 'grid',
-                        gridTemplateColumns: '1fr 1fr',
-                        gridGap: 2,
-                      })}
-                    >
-                      <Button variant="link" onClick={() => setEdit(false)}>
-                        Cancel
-                      </Button>
-
-                      <Button
-                        disabled={!editValue}
-                        variant="secondary"
-                        onClick={async () => {
-                          await actions.editor.updateComment({
-                            threadId: thread.id,
-                            commentId: thread.initialComment.id,
-                            content: editValue,
-                          });
-                          setEdit(false);
-                        }}
-                      >
-                        Save
-                      </Button>
-                    </Element>
-                  </>
-                )}
-              </Element>
+              </>
             </Stack>
-            <>
-              {thread.comments.map((reply, i) => {
-                if (i === 0) return null;
-                return <Reply reply={reply} threadId={thread.id} />;
-              })}
-            </>
-          </Stack>
-        )}
+          )}
 
-        <Textarea
-          autosize
-          css={css({
-            overflow: 'hidden',
-            border: 'none',
-            display: 'block',
-            borderTop: '1px solid',
-            borderColor: 'sideBar.border',
-          })}
-          value={value}
-          onChange={e => setValue(e.target.value)}
-          placeholder={thread ? 'Reply' : 'Write a comment...'}
-          onKeyDown={event => {
-            if (event.keyCode === ENTER && !event.shiftKey) onSubmit();
-          }}
-        />
-      </Stack>
+          <Textarea
+            autosize
+            css={css({
+              overflow: 'hidden',
+              border: 'none',
+              display: 'block',
+              borderTop: '1px solid',
+              borderColor: 'sideBar.border',
+            })}
+            value={value}
+            onChange={e => setValue(e.target.value)}
+            placeholder={thread ? 'Reply' : 'Write a comment...'}
+            onKeyDown={event => {
+              if (event.keyCode === ENTER && !event.shiftKey) onSubmit();
+            }}
+          />
+        </Stack>
+      </motion.div>
     </Draggable>
   );
 };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/index.tsx
index 874d5d42e63..106bb411370 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/CommentThreads/index.tsx
@@ -39,6 +39,8 @@ export const CommentThreads: React.FC = () => {
     }
   };
 
+  const selectedCommentRef = React.createRef();
+
   const Empty = () => (
     <Stack
       direction="vertical"
@@ -114,6 +116,11 @@ export const CommentThreads: React.FC = () => {
               <CommentThread
                 key={commentThread.id}
                 commentThread={commentThread}
+                innerRef={
+                  commentThread.id === currentCommentThreadId
+                    ? selectedCommentRef
+                    : null
+                }
               />
             ))}
           </List>
@@ -121,7 +128,9 @@ export const CommentThreads: React.FC = () => {
       </div>
       {currentCommentThreads.length ? null : <Empty />}
       <AddCommentThread />
-      {currentCommentThreadId && <CommentDialog />}
+      {currentCommentThreadId && (
+        <CommentDialog triggerRef={selectedCommentRef} />
+      )}
     </Stack>
   );
 };