Topics list fixes

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -314,7 +314,7 @@ export const AuthorCard = (props: Props) => {
                         isAuthor(subscription) ? (
                           <AuthorBadge author={subscription} />
                         ) : (
-                          <TopicBadge topic={subscription} />
+                          <TopicBadge topic={subscription} subscriptionsMode={true} />
                         )
                       }
                     </For>

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -6,7 +6,6 @@
     align-items: flex-start;
     display: flex;
     flex-direction: row;
-    margin-bottom: 1.6rem;
   }
 
   .basicInfo {
@@ -19,26 +18,29 @@
 
   .info {
     @include font-size(1.4rem);
-
     border: none;
-    display: flex;
+    //display: flex;
-    flex-direction: column;
+    //flex-direction: column;
 
     &:hover {
       background: unset;
+      color: inherit;
+
+      .title {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+      }
     }
 
     .title {
       @include font-size(2.2rem);
-
       font-weight: bold;
-      margin-bottom: 0.8rem;
     }
 
     .description {
       @include font-size(1.6rem);
-
       line-height: 1.4;
+      margin: 0.8rem 0;
       -webkit-line-clamp: 3;
     }
   }
@@ -47,6 +49,7 @@
     display: flex;
     flex-direction: row;
     gap: 1rem;
+    margin-bottom: -1rem;
   }
 
   .subscribeButton {

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -15,6 +15,7 @@ type Props = {
   topic: Topic
   minimizeSubscribeButton?: boolean
   showStat?: boolean
+  subscriptionsMode?: boolean
 }
 
 export const TopicBadge = (props: Props) => {
@@ -52,15 +53,15 @@ export const TopicBadge = (props: Props) => {
         <div class={styles.basicInfo}>
           <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 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>
-              }
-            >
-              <div innerHTML={props.topic.body} class={clsx('text-truncate', styles.description)} />
             </Show>
           </a>
         </div>