HoverCard: Improve long bio situation

app/soapbox/features/profile_hover_card/profile_hover_card_container.js

@@ -38,28 +38,37 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
     visible: true,
   }
 
+  getBadges = () => {
+    const { account } = this.props;
+    let badges = [];
+    if (isAdmin(account)) badges.push(<Badge slug='admin' title='Admin' />);
+    if (isModerator(account)) badges.push(<Badge slug='moderator' title='Moderator' />);
+    if (account.getIn(['patron', 'is_patron'])) badges.push(<Badge slug='patron' title='Patron' />);
+    return badges;
+  }
+
   render() {
     const { visible, accountId, account } = this.props;
     if (!accountId) return null;
     const accountBio = { __html: account.get('note_emojified') };
-    let followed_by  = account.getIn(['relationship', 'followed_by']);
+    const followedBy  = account.getIn(['relationship', 'followed_by']);
+    const badges = this.getBadges();
 
     return (
       <div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })}>
         <div className='profile-hover-card__container'>
-          { followed_by ?
+          {followedBy &&
             <span className='relationship-tag'>
               <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
-            </span>
+            </span>}
-            : '' }
           <div className='profile-hover-card__action-button'><ActionButton account={account} /></div>
           <UserPanel className='profile-hover-card__user' accountId={accountId} />
-          <div className='profile-hover-card__badges'>
+          {badges.length > 0 &&
-            {isAdmin(account) && <Badge slug='admin' title='Admin' />}
+            <div className='profile-hover-card__badges'>
-            {isModerator(account) && <Badge slug='moderator' title='Moderator' />}
+              {badges}
-            {account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />}
+            </div>}
-          </div>
+          {account.getIn(['source', 'note'], '').length > 0 &&
-          <div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} />
+            <div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} />}
         </div>
       </div>
     );

app/styles/components/profile_hover_card.scss

@@ -14,7 +14,7 @@
   transition-property: opacity;
   transition-duration: 0.2s;
   transition-delay: 0.7s;
-  width: 265px;
+  width: 300px;
   z-index: 998;
   left: -10px;
   padding-top: 20px;
@@ -73,6 +73,18 @@
 
   .profile-hover-card__bio {
     margin: 0 20px 20px;
+    max-height: 4em;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 20px;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(0deg, var(--foreground-color) 0%, var(--foreground-color), 80%, transparent);
+    }
   }
 }