From 38ab3ddc4b70a50857efe60cf2d66fcf690a5140 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 6 Nov 2023 11:00:31 +0300
Subject: [PATCH] Update AuthorBadge mobile view (#302)

---
 .../AuthorBadge/AuthorBadge.module.scss       | 20 +++++-
 .../Author/AuthorBadge/AuthorBadge.tsx        | 62 ++++++++++---------
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
index 60568001..36508c1c 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss
+++ b/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;
     }
diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index de44b014..47ba693b 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -78,36 +78,38 @@ export const AuthorBadge = (props: Props) => {
 
   return (
     <div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
-      <Userpic
-        hasLink={true}
-        size={'M'}
-        name={props.author.name}
-        userpic={props.author.userpic}
-        slug={props.author.slug}
-      />
-      <a href={`/author/${props.author.slug}`} class={styles.info}>
-        <div class={styles.name}>
-          <span>{props.author.name}</span>
-        </div>
-        <Show when={!props.nameOnly}>
-          <Switch
-            fallback={
-              <div class={styles.bio}>
-                {t('Registered since {date}', { date: formatDate(new Date(props.author.createdAt)) })}
-              </div>
-            }
-          >
-            <Match when={props.author.bio}>
-              <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
-            </Match>
-            <Match when={props.author?.stat && props.author?.stat.shouts > 0}>
-              <div class={styles.bio}>
-                {t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
-              </div>
-            </Match>
-          </Switch>
-        </Show>
-      </a>
+      <div class={styles.basicInfo}>
+        <Userpic
+          hasLink={true}
+          size={'M'}
+          name={props.author.name}
+          userpic={props.author.userpic}
+          slug={props.author.slug}
+        />
+        <a href={`/author/${props.author.slug}`} class={styles.info}>
+          <div class={styles.name}>
+            <span>{props.author.name}</span>
+          </div>
+          <Show when={!props.nameOnly}>
+            <Switch
+              fallback={
+                <div class={styles.bio}>
+                  {t('Registered since {date}', { date: formatDate(new Date(props.author.createdAt)) })}
+                </div>
+              }
+            >
+              <Match when={props.author.bio}>
+                <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
+              </Match>
+              <Match when={props.author?.stat && props.author?.stat.shouts > 0}>
+                <div class={styles.bio}>
+                  {t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
+                </div>
+              </Match>
+            </Switch>
+          </Show>
+        </a>
+      </div>
       <Show when={props.author.slug !== session()?.user.slug && !props.nameOnly}>
         <div class={styles.actions}>
           <Show