Subscriptions list styles fixes

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

@@ -12,6 +12,27 @@
     margin-bottom: 2.4rem;
   }
 
+  .listWrapper & {
+    align-items: flex-start;
+    margin-bottom: 2rem;
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 3rem;
+    }
+
+    @include media-breakpoint-between(md, lg) {
+      margin-bottom: 3rem;
+    }
+
+    .circlewrap {
+      margin-top: 1rem;
+    }
+
+    .authorDetailsWrapper {
+      margin-bottom: 1rem;
+    }
+  }
+
   @include media-breakpoint-down(lg) {
     flex-wrap: wrap;
   }
@@ -40,6 +61,7 @@
 
 .authorDetailsWrapper {
   flex: 1 0;
+  position: relative;
 
   @include media-breakpoint-up(sm) {
     flex: 1;
@@ -64,18 +86,28 @@
   font-weight: 500;
   line-height: 2;
   margin-bottom: 0.8rem;
+
+  .listWrapper &:before {
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+  }
 }
 
 .authorAbout {
   color: rgb(0 0 0 / 60%);
   font-size: 1.4rem;
-  line-height: 1.4;
+  font-weight: 500;
+  line-height: 1.3;
   word-break: break-word;
 }
 
 .authorSubscribe {
   align-items: center;
-  //display: flex;
 
   @include media-breakpoint-down(md) {
     flex-wrap: wrap;
@@ -526,7 +558,6 @@
 
 .listWrapper {
   max-height: 70vh;
-  overflow: auto;
   //padding-right: 2rem;
 
   :global(.row) {
@@ -535,14 +566,19 @@
 }
 
 .switcherCounter {
+  align-items: center;
   background: #f7f7f8;
   border-radius: 0.8rem;
-  display: inline-block;
+  display: inline-flex;
   font-size: 1.2rem;
   font-weight: bold;
-  line-height: 1.2;
+  height: 2.2rem;
+  justify-content: center;
+  line-height: 2.2rem;
   margin-left: 0.4rem;
-  padding: 0.4rem 0.6rem;
+  min-width: 2.2rem;
+  padding: 0 0.6rem;
+  text-align: center;
 }
 
 :global(.view-switcher__item--selected) .switcherCounter {

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -377,7 +377,7 @@ export const AuthorCard = (props: Props) => {
       </div>
 
       <Show when={props.followers}>
-        <Modal variant="wide" name="followers" onClose={handleCloseFollowModals} maxHeight>
+        <Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
           <>
             <h2>{t('Followers')}</h2>
             <div class={styles.listWrapper}>
@@ -404,7 +404,7 @@ export const AuthorCard = (props: Props) => {
       </Show>
 
       <Show when={props.following}>
-        <Modal variant="wide" name="following" onClose={handleCloseFollowModals} maxHeight>
+        <Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
           <>
             <h2>{t('Subscriptions')}</h2>
             <ul class="view-switcher">
@@ -447,7 +447,14 @@ export const AuthorCard = (props: Props) => {
                           showPublicationsCounter={true}
                         />
                       ) : (
-                        <TopicCard compact isTopicInRow showDescription isCardMode topic={subscription} />
+                        <TopicCard
+                          compact
+                          isTopicInRow
+                          showDescription
+                          isCardMode
+                          withIcon
+                          topic={subscription}
+                        />
                       )
                     }
                   </For>

src/components/Feed/CardTopic.module.scss

@@ -11,14 +11,22 @@
     background: transparent;
     border: none;
     color: $link-color;
-    position: relative;
-    z-index: 2;
 
     &:hover {
       background: $link-color;
       color: #fff !important;
     }
   }
+
+  a:before {
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+  }
 }
 
 .shoutTopicFloorImportant {
@@ -35,4 +43,9 @@
 
 .shoutTopicFeedMode {
   font-size: 1.2rem;
+
+  a {
+    position: relative;
+    z-index: 2;
+  }
 }

src/components/Nav/Modal/Modal.tsx

@@ -43,7 +43,7 @@ export const Modal = (props: Props) => {
   return (
     <Show when={visible()}>
       <div class={styles.backdrop} onClick={handleHide}>
-        <div className="wide-container">
+        <div class="wide-container">
           <div
             class={clsx(styles.modal, {
               [styles.narrow]: props.variant === 'narrow',

src/components/Topic/Card.module.scss

@@ -33,6 +33,10 @@
   }
 }
 
+.topicDetails {
+  position: relative;
+}
+
 .topicInRow {
   align-items: center;
   display: flex;
@@ -118,7 +122,9 @@
 .isSubscribed {
   background: #000;
   color: #fff;
-  transition: background-color 0.3s, color 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
   white-space: nowrap;
   width: 9em;
 

src/components/Topic/Card.tsx

@@ -27,6 +27,7 @@ interface TopicProps {
   isCardMode?: boolean
   minimizeSubscribeButton?: boolean
   isNarrow?: boolean
+  withIcon?: boolean
 }
 
 export const TopicCard = (props: TopicProps) => {
@@ -108,6 +109,14 @@ export const TopicCard = (props: TopicProps) => {
               {props.topic.body}
             </div>
           </Show>
+          <Show when={props.showDescription && !props.topic?.body && props.topic.stat?.shouts > 0}>
+            <div
+              class={clsx(styles.topicDescription)}
+              classList={{ [styles.topicDescriptionShort]: props.shortDescription }}
+            >
+              {props.topic.stat?.shouts} публикаций
+            </div>
+          </Show>
         </div>
         <div
           class={styles.controlContainer}

src/components/Views/Author/Author.module.scss

@@ -10,12 +10,6 @@
   .groupControls {
     margin-bottom: 6rem !important;
     margin-top: 0 !important;
-
-    @include media-breakpoint-down(md) {
-      border-top: 2px solid #000;
-      margin-top: -1.6rem;
-      padding-top: 1.6rem;
-    }
   }
 }
 
@@ -74,7 +68,9 @@
   overflow: hidden;
   padding-bottom: 4em;
   position: relative;
-  transition: max-height 0.5s, margin-bottom 0s 0.3s;
+  transition:
+    max-height 0.5s,
+    margin-bottom 0s 0.3s;
 
   &:after {
     background-image: linear-gradient(to top, #fff, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0));