From 6db7d9bd2dfe5c5d854622e3ca8932c825038710 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Thu, 11 Aug 2022 12:35:38 +0100
Subject: [PATCH] Fixes for super long expertise in form and comments

refs https://github.com/TryGhost/Team/issues/1758
---
 apps/comments-ui/src/components/Comment.js |  2 +-
 apps/comments-ui/src/components/Form.js    | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 3192162d98..6196d6c967 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -105,7 +105,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
                                 <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 pr-4 text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
-                                        <span className="inline-block max-w-full text-ellipsis overflow-hidden ...">
+                                        <span>
                                             {memberBio && <span>{memberBio}<span className="mx-[0.3em]">·</span></span>}
                                             <span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span>
                                             <EditedInfo comment={comment} />
diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js
index e320d6c853..2f36d0a273 100644
--- a/apps/comments-ui/src/components/Form.js
+++ b/apps/comments-ui/src/components/Form.js
@@ -409,11 +409,11 @@ const Form = (props) => {
                             </div>
                         </div>
                     </div>
-                    <div className='absolute top-1 left-0 flex justify-start items-center h-12'>
-                        <div className="mr-3">
+                    <div className='absolute top-1 left-0 flex justify-start items-center h-12 w-full'>
+                        <div className="grow-0 mr-3">
                             <Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
                         </div>
-                        <div>
+                        <div className="grow-1 w-full">
                             <Transition
                                 show={isFormReallyOpen}
                                 enter="transition duration-500 delay-100 ease-in-out"
@@ -430,14 +430,14 @@ const Form = (props) => {
                                             bioAutofocus: false
                                         });
                                     }}>{memberName ? memberName : 'Anonymous'}</div>
-                                <div className="flex items-baseline">
+                                <div className="flex items-baseline justify-start">
                                     <button
-                                        className={`group transition duration-150 flex justify-start items-center font-sans text-[14px] tracking-tight text-neutral-400 hover:text-neutral-500 dark:text-[rgba(255,255,255,0.5)] ${!memberBio && 'text-neutral-300 hover:text-neutral-400'}`}
+                                        className={`group transition duration-150 whitespace-nowrap max-w-[80%] sm:max-w-[90%] flex items-center justify-start font-sans text-[14px] text-left tracking-tight text-neutral-400 hover:text-neutral-500 dark:text-[rgba(255,255,255,0.5)] ${!memberBio && 'text-neutral-300 hover:text-neutral-400'}`}
                                         onClick={(event) => {
                                             handleShowDialog(event, {
                                                 bioAutofocus: true
                                             });
-                                        }}>{memberBio ? memberBio : 'Add your expertise'}
+                                        }}><span className="text-ellipsis overflow-hidden ...">{memberBio ? memberBio : 'Add your expertise'}</span>
                                         {memberBio && <EditIcon className="transition-all duration-100 ease-out opacity-0 -translate-x-[6px] group-hover:opacity-100 group-hover:translate-x-0 w-[12px] h-[12px] stroke-neutral-500 ml-1" />}
                                     </button>
                                 </div>