Changed the markup layout of the comments to fix a positoning problem when expertise is too long on mobile

- When the Expertise is too long, it can cause a broken look to comments on mobile
- Changed how the markup works to better handle the details

apps/comments-ui/src/components/Comment.js

@@ -86,19 +86,22 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
             >
-                <div className={`flex flex-row ${hasReplies ? 'mb-2 sm:mb-4' : 'mb-6 sm:mb-10'}`}>
-                    <div>
-                        <div className="flex items-center mb-2 h-12">
-                            <div className="mr-3">
+                <div className={`flex flex-row w-full ${hasReplies ? 'mb-2 sm:mb-2' : 'mb-6 sm:mb-10'}`}>
+                    <div className="mr-3 flex flex-col justify-start items-center">
+                        <div className="flex-0 mb-4">
                             <Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
                         </div>
+                        {/* {!props.isReply && <div className="w-[3px] h-full bg-gradient-to-b from-neutral-100 via-neutral-100 to-transparent grow rounded" />} */}
+                    </div>
+                    <div className="grow">
+                        <div className="flex items-start -mt-[3px] mb-2">
                             {isNotPublished ?
                                 <div>
                                     <p className="font-sans text-[16px] leading-normal text-neutral-400 italic mt-[4px]">{notPublishedMessage}</p>
                                 </div> :
                                 <div>
                                     <h4 className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23] dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
-                                    <div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
+                                    <div className="flex items-baseline font-sans text-[14px] tracking-tight pr-4 text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
                                         <span className="inline-block max-w-full text-ellipsis overflow-hidden ...">
                                             {memberBio && <span>{memberBio}<span className="mx-[0.3em]">·</span></span>}
                                             <span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span>
@@ -109,27 +112,29 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
                         </div>
 
                         {!isNotPublished &&
-                        <div className={`ml-12 sm:ml-[52px] mb-2 pr-4`}>
+                        <div className={`mb-2 pr-4`}>
                             <p dangerouslySetInnerHTML={html} className="gh-comment-content font-sans leading-normal text-[16px] text-neutral-900 dark:text-[rgba(255,255,255,0.85)]"></p>
                         </div>}
 
-                        <div className="ml-12 sm:ml-[52px] flex gap-5 items-center">
+                        <div className="flex gap-5 items-center">
                             {!isNotPublished && <Like comment={comment} />}
                             {!isNotPublished && (canReply && (isNotPublished || !props.parent) && <Reply disabled={!!isEditing} comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)}
                             <More comment={comment} toggleEdit={toggleEditMode} disableEditing={isEditing} />
                         </div>
-                    </div>
-                </div>
+
                         {hasReplies &&
-                    <div className="ml-11 sm:ml-14 mt-8 sm:mt-10 mb-4 sm:mb-0">
+                            <div className="mt-8 sm:mt-10 mb-4 sm:mb-0">
                                 <Replies comment={comment} />
                             </div>
                         }
+
                         {isInReplyMode && 
-                    <div className="ml-14 my-10">
+                            <div className="my-10">
                                 <Form parent={comment} close={closeReplyMode} isReply={true} />
                             </div>
                         }
+                    </div>
+                </div>
             </Transition>
         );
     }

apps/comments-ui/src/components/Form.js

@@ -354,11 +354,11 @@ const Form = (props) => {
             <form ref={formEl} onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused} className={`
                 transition duration-200
                 pt-3 pb-2 px-3
-                -mt-[12px] -mx-3 mb-10
+                -mt-[14px] -mx-3 mb-10
                 rounded-md
                 ${isFormReallyOpen ? 'cursor-default' : 'cursor-pointer'}
                 ${(!props.isReply && !props.isEdit) && '-mt-[4px]'}
-                ${(props.isReply || props.isEdit) && '-mt-[16px]'}
+                ${(props.isReply || props.isEdit) && '-mt-[20px]'}
                 ${shouldFormBeReduced && 'pl-1'}
             `}>
                 <div className="w-full relative">

apps/comments-ui/src/components/RepliesPagination.js

@@ -5,7 +5,7 @@ const RepliesPagination = (props) => {
     const count = props.count;
 
     return (
-        <button className="group w-full text-neutral-700 font-semibold px-0 pt-0 pb-3 mt-10 sm:mt-0 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
+        <button className="group w-full text-neutral-700 font-semibold mt-10 sm:mt-0 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
             <span className="whitespace-nowrap mr-4">↓ Show {count} more replies</span>
             <span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 dark:bg-[rgba(255,255,255,0.08)] group-hover:bg-neutral-200 rounded h-[2px] mt-[3px]" />
         </button>