Fixed subscribers style

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -18,9 +18,8 @@
 
   .authorName {
     @include font-size(4rem);
-
     font-weight: 700;
-    margin-bottom: 0.2em;
+    margin-bottom: 1.2rem;
   }
 
   .authorAbout {
@@ -432,3 +431,16 @@
 .listWrapper {
   max-height: 70vh;
 }
+
+.subscribersContainer {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  gap: 1rem;
+  margin-top: 0;
+  white-space: nowrap;
+
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+  }
+}

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -127,12 +127,14 @@ export const AuthorCard = (props: Props) => {
             <div class={styles.authorAbout} innerHTML={props.author.bio} />
           </Show>
           <Show when={props.followers?.length > 0 || props.following?.length > 0}>
+            <div class={styles.subscribersContainer}>
               <Subscribers
                 followers={props.followers}
                 followersAmount={props.author?.stat?.followers}
                 following={props.following}
                 followingAmount={props.author?.stat?.authors}
               />
+            </div>
           </Show>
         </div>
         <ShowOnlyOnClient>

src/components/Topic/Full.module.scss

@@ -44,16 +44,20 @@
 }
 
 .topicDetails {
+  align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
   font-size: 1.4rem;
   justify-content: center;
-  gap: 4rem;
+  gap: 1rem;
   margin-top: 1.5rem;
 }
 
 .topicDetailsItem {
+  align-items: center;
   display: flex;
+  margin-right: 1rem;
+  white-space: nowrap;
 }
 
 .topicDetailsIcon {

src/components/_shared/Subscribers/Subscribers.module.scss

@@ -1,19 +1,8 @@
-.subscribersContainer {
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 1.4rem;
-  margin-top: 1.5rem;
-
-  @include media-breakpoint-down(md) {
-    justify-content: center;
-  }
-}
-
 .subscribers {
   align-items: center;
   cursor: pointer;
   display: inline-flex;
-  margin: 0 2% 1rem;
+  margin: 0 1rem 0 0;
   vertical-align: top;
   border-bottom: unset !important;
 
@@ -44,7 +33,6 @@
 
   .subscribersCounter {
     font-weight: 500;
-    margin-left: 1rem;
   }
 
   &:hover {
@@ -55,3 +43,8 @@
     }
   }
 }
+
+.subscribersList {
+  display: flex;
+  margin-right: 0.6rem;
+}

src/components/_shared/Subscribers/Subscribers.tsx

@@ -1,9 +1,9 @@
-import { For, Show } from 'solid-js'
+import {For, Show} from 'solid-js'
 
-import { useLocalize } from '../../../context/localize'
+import {useLocalize} from '../../../context/localize'
 
-import { Author, Topic } from '../../../graphql/schema/core.gen'
+import {Author, Topic} from '../../../graphql/schema/core.gen'
-import { Userpic } from '../../Author/Userpic'
+import {Userpic} from '../../Author/Userpic'
 
 import styles from './Subscribers.module.scss'
 
@@ -15,15 +15,17 @@ type Props = {
 }
 
 export const Subscribers = (props: Props) => {
-  const { t } = useLocalize()
+  const {t} = useLocalize()
 
   return (
-    <div class={styles.subscribersContainer}>
+    <>
       <a href="?m=followers" class={styles.subscribers}>
         <Show when={props.followers && props.followers.length > 0}>
+          <div class={styles.subscribersList}>
             <For each={props.followers.slice(0, 3)}>
-            {(f) => <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />}
+              {(f) => <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem}/>}
             </For>
+          </div>
         </Show>
         <div class={styles.subscribersCounter}>
           {t('SubscriberWithCount', {
@@ -34,19 +36,22 @@ export const Subscribers = (props: Props) => {
 
       <a href="?m=following" class={styles.subscribers}>
         <Show when={props.following && props.following.length > 0}>
+          <div class={styles.subscribersList}>
             <For each={props.following.slice(0, 3)}>
               {(f) => {
                 if ('name' in f) {
-                return <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
+                  return <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem}/>
                 }
 
                 if ('title' in f) {
-                return <Userpic size={'XS'} name={f.title} userpic={f.pic} class={styles.subscribersItem} />
+                  return <Userpic size={'XS'} name={f.title} userpic={f.pic}
+                                  class={styles.subscribersItem}/>
                 }
 
                 return null
               }}
             </For>
+          </div>
         </Show>
         <div class={styles.subscribersCounter}>
           {t('SubscriptionWithCount', {
@@ -54,6 +59,6 @@ export const Subscribers = (props: Props) => {
           })}
         </div>
       </a>
-    </div>
+    </>
   )
 }

src/pages/topic.page.tsx

@@ -54,7 +54,7 @@ export const TopicPage = (props: PageProps) => {
   const usePrerenderedData = props.topic?.slug === slug()
 
   return (
-    <PageLayout title={props.seo.title}>
+    <PageLayout title={props.seo?.title}>
       <ReactionsProvider>
         <Show when={isLoaded()} fallback={<Loading />}>
           <TopicView