Fixed author badge in the following modal

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>

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} />
                         )

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;
     }

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -69,14 +69,15 @@ 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
-              <div innerHTML={props.topic.body} class={clsx('text-truncate', styles.description)} />
+              when={props.topic.body}
-            </Show>
+              fallback={
-
-            <Show when={props.subscriptionsMode && !props.topic.body}>
                 <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>
           </a>
         </div>