feat: Improve UX of comment actions (#924)

Closes #915

client/src/components/CardModal/Activities/CommentEdit.jsx

@@ -10,7 +10,7 @@ import { focusEnd } from '../../../utils/element-helpers';
 
 import styles from './CommentEdit.module.scss';
 
-const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref) => {
+const CommentEdit = React.forwardRef(({ defaultData, onUpdate, text, actions }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(null);
@@ -76,7 +76,12 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
   }, [isOpened]);
 
   if (!isOpened) {
-    return children;
+    return (
+      <>
+        {actions}
+        {text}
+      </>
+    );
   }
 
   return (
@@ -101,9 +106,10 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)
 });
 
 CommentEdit.propTypes = {
-  children: PropTypes.element.isRequired,
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
+  text: PropTypes.element.isRequired,
+  actions: PropTypes.element.isRequired,
 };
 
 export default React.memo(CommentEdit);

client/src/components/CardModal/Activities/ItemComment.jsx

@@ -31,7 +31,18 @@ const ItemComment = React.memo(
           <User name={user.name} avatarUrl={user.avatarUrl} />
         </span>
         <div className={classNames(styles.content)}>
+          <CommentEdit
+            ref={commentEdit}
+            defaultData={data}
+            onUpdate={onUpdate}
+            text={
+              <div className={styles.text}>
+                <Markdown linkTarget="_blank">{data.text}</Markdown>
+              </div>
+            }
+            actions={
               <div className={styles.title}>
+                <span>
                   <span className={styles.author}>{user.name}</span>
                   <span className={styles.date}>
                     {t(`format:${getDateFormat(createdAt)}`, {
@@ -39,12 +50,7 @@ const ItemComment = React.memo(
                       value: createdAt,
                     })}
                   </span>
-          </div>
-          <CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}>
-            <>
-              <div className={styles.text}>
-                <Markdown linkTarget="_blank">{data.text}</Markdown>
-              </div>
+                </span>
                 {canEdit && (
                   <Comment.Actions>
                     <Comment.Action
@@ -67,8 +73,9 @@ const ItemComment = React.memo(
                     </DeletePopup>
                   </Comment.Actions>
                 )}
-            </>
-          </CommentEdit>
+              </div>
+            }
+          />
         </div>
       </Comment>
     );

client/src/components/CardModal/Activities/ItemComment.module.scss

@@ -38,6 +38,12 @@
 
   .title {
     padding-bottom: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: -1em;
+    background: #f5f6f7;
   }
 
   .user {