Profile head style fixes

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -43,8 +43,23 @@
     }
   }
 
+  .authorActionsLabel {
+    @include media-breakpoint-down(sm) {
+      display: none;
+    }
+  }
+
+  .authorActionsLabelMobile {
+    display: none;
+
+    @include media-breakpoint-down(sm) {
+      display: block;
+    }
+  }
+
   .authorDetails {
     display: block;
+    margin-bottom: 0;
 
     @include media-breakpoint-down(md) {
       flex: 1 100%;
@@ -403,7 +418,7 @@
   @include media-breakpoint-down(sm) {
     flex: 1 100%;
     justify-content: center;
-    margin-top: 1em;
+    margin-top: 1rem;
   }
 
   @include media-breakpoint-down(md) {

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -131,7 +131,9 @@ export const AuthorCard = (props: Props) => {
       <div class={clsx('col-md-15 col-xl-13', styles.authorDetails)}>
         <div class={styles.authorDetailsWrapper}>
           <div class={styles.authorName}>{name()}</div>
+          <Show when={props.author.bio}>
             <div class={styles.authorAbout} innerHTML={props.author.bio} />
+          </Show>
           <Show
             when={
               (props.followers && props.followers.length > 0) ||
@@ -237,7 +239,12 @@ export const AuthorCard = (props: Props) => {
                 <Button
                   variant="secondary"
                   onClick={() => redirectPage(router, 'profileSettings')}
-                  value={t('Edit profile')}
+                  value={
+                    <>
+                      <span class={styles.authorActionsLabel}>{t('Edit profile')}</span>
+                      <span class={styles.authorActionsLabelMobile}>{t('Edit')}</span>
+                    </>
+                  }
                 />
                 <SharePopup
                   title={props.author.name}