From 12ca2b9a97bba4d3defeb4d33eaee2abea9ef68d Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 30 Apr 2024 18:14:10 +0300
Subject: [PATCH] Fixed author badge in the following modal

---
 src/components/Author/AuthorBadge/AuthorBadge.tsx |  3 ++-
 src/components/Author/AuthorCard/AuthorCard.tsx   |  2 +-
 .../Topic/TopicBadge/TopicBadge.module.scss       |  4 ++--
 src/components/Topic/TopicBadge/TopicBadge.tsx    | 15 ++++++++-------
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index bc7c3bbd..75687bfc 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -27,6 +27,7 @@ type Props = {
   inviteView?: boolean
   onInvite?: (id: number) => void
   selected?: boolean
+  subscriptionsMode?: boolean
 }
 export const AuthorBadge = (props: Props) => {
   const { mediaMatches } = useMediaQuery()
@@ -114,7 +115,7 @@ export const AuthorBadge = (props: Props) => {
                 <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
               </Match>
             </Switch>
-            <Show when={props.author?.stat}>
+            <Show when={props.author?.stat && !props.subscriptionsMode}>
               <div class={styles.bio}>
                 <Show when={props.author?.stat.shouts > 0}>
                   <div>{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}</div>
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index aeb64cdf..1423e3f7 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -312,7 +312,7 @@ export const AuthorCard = (props: Props) => {
                     <For each={authorSubs()}>
                       {(subscription) =>
                         isAuthor(subscription) ? (
-                          <AuthorBadge author={subscription} />
+                          <AuthorBadge author={subscription} subscriptionsMode={true} />
                         ) : (
                           <TopicBadge topic={subscription} subscriptionsMode={true} />
                         )
diff --git a/src/components/Topic/TopicBadge/TopicBadge.module.scss b/src/components/Topic/TopicBadge/TopicBadge.module.scss
index 271d1e20..b830a7c8 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss
@@ -68,7 +68,7 @@
       @include font-size(1.6rem);
       line-height: 1.4;
       margin: 0.8rem 0;
-      -webkit-line-clamp: 3;
+      -webkit-line-clamp: 2;
     }
   }
 
@@ -111,7 +111,7 @@
 
     .description {
       color: var(--black-400);
-      @include font-size(1.4rem);
+      @include font-size(1.2rem);
       font-weight: 500;
       margin: 0;
     }
diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx
index ed3f4902..4eaee460 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@@ -69,15 +69,16 @@ export const TopicBadge = (props: Props) => {
           <a href={`/topic/${props.topic.slug}`} class={styles.info}>
             <span class={styles.title}>{title()}</span>
 
-            <Show when={props.topic.body}>
+            <Show
+              when={props.topic.body}
+              fallback={
+                <div class={styles.description}>
+                  {t('PublicationsWithCount', { count: props.topic?.stat?.shouts ?? 0 })}
+                </div>
+              }
+            >
               <div innerHTML={props.topic.body} class={clsx('text-truncate', styles.description)} />
             </Show>
-
-            <Show when={props.subscriptionsMode && !props.topic.body}>
-              <div class={styles.description}>
-                {t('PublicationsWithCount', { count: props.topic?.stat?.shouts ?? 0 })}
-              </div>
-            </Show>
           </a>
         </div>
         <div class={styles.actions}>