Update AuthorBadge mobile view (#302)

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -11,6 +11,9 @@
       margin-bottom: 0;
     }
   }
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
 
   @include media-breakpoint-up(sm) {
     margin-bottom: 2rem;
@@ -20,12 +23,23 @@
     text-align: left;
   }
 
+  .basicInfo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 0 calc(100% - 5.2rem);
+    gap: 1rem;
+
+    @include media-breakpoint-down(sm) {
+      flex: 0 100%;
+    }
+  }
+
   .info {
     @include font-size(1.4rem);
 
     border: none;
     display: flex;
-    flex: 0 calc(100% - 5.2rem);
     flex-direction: column;
     line-height: 1.3;
     margin-bottom: 1rem;
@@ -60,6 +74,10 @@
     margin-left: 5.2rem;
     gap: 1rem;
 
+    @include media-breakpoint-down(sm) {
+      margin-left: 0;
+    }
+
     @include media-breakpoint-up(sm) {
       margin-left: 2rem;
     }

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -78,6 +78,7 @@ export const AuthorBadge = (props: Props) => {
 
   return (
     <div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
+      <div class={styles.basicInfo}>
         <Userpic
           hasLink={true}
           size={'M'}
@@ -108,6 +109,7 @@ export const AuthorBadge = (props: Props) => {
             </Switch>
           </Show>
         </a>
+      </div>
       <Show when={props.author.slug !== session()?.user.slug && !props.nameOnly}>
         <div class={styles.actions}>
           <Show