Style fixes

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

@@ -29,10 +29,6 @@
     flex-wrap: wrap;
   }
 
-  @include media-breakpoint-down(md) {
-    text-align: center;
-  }
-
   @include media-breakpoint-between(md, lg) {
     flex-wrap: wrap;
   }
@@ -353,6 +349,7 @@
 
     @include media-breakpoint-down(md) {
       flex: 1 100%;
+      text-align: center;
     }
   }
 
@@ -509,7 +506,11 @@
 .listWrapper {
   max-height: 70vh;
   overflow: auto;
-  padding-right: 2rem;
+  //padding-right: 2rem;
+
+  :global(.row) {
+    margin-right: 0;
+  }
 }
 
 .switcherCounter {

src/components/Feed/ArticleCard.module.scss

@@ -286,8 +286,6 @@
 }
 
 .shoutCardContent {
-  margin-bottom: 1em;
-
   @include media-breakpoint-up(md) {
     margin-bottom: 2em;
 
@@ -395,7 +393,7 @@
 
 .shoutCardWithCover {
   aspect-ratio: 16/9;
-  padding: 0 2.4rem;
+  //padding: 0 2.4rem;
   width: 100%;
 
   @include media-breakpoint-down(xl) {
@@ -454,8 +452,6 @@
     z-index: 1;
 
     @include media-breakpoint-down(xl) {
-      padding-left: 0;
-      padding-right: 0;
       position: relative;
     }
   }

src/components/Feed/Beside.tsx

@@ -72,6 +72,7 @@ export const Beside = (props: BesideProps) => {
                             iconButton={props.iconButton}
                             showPublications={true}
                             isCardMode={true}
+                            isNarrow={true}
                           />
                         </Show>
                         <Show when={props.wrapper === 'author'}>

src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.module.scss

@@ -1,3 +1,7 @@
+.authFormHeader {
+  margin-right: 3.2rem;
+}
+
 .authFormDescription {
   font-size: 14px;
   font-weight: 400;

src/components/Nav/AuthModal/AuthModalHeader/AuthModalHeader.tsx

@@ -78,7 +78,7 @@ export const AuthModalHeader = (props: Props) => {
 
   return (
     <>
-      <h4>{title}</h4>
+      <h4 class={styles.authFormHeader}>{title}</h4>
       <Show when={description}>
         <p class={styles.authFormDescription} innerHTML={description} />
       </Show>

src/components/Nav/Modal/Modal.module.scss

@@ -33,10 +33,14 @@
     width: 16px;
     opacity: 1;
     padding: 0;
-    right: 1.6rem;
+    right: 2.4rem;
     transition: opacity 0.3s;
     z-index: 1;
 
+    @include media-breakpoint-up(sm) {
+      right: 1.6rem;
+    }
+
     svg {
       display: block;
       pointer-events: none;
@@ -57,21 +61,25 @@
   }
 
   &.narrow {
-    max-width: 460px;
+    width: 100%;
-    width: 50%;
 
-    @media (width >= 800px) and (width <= 991px) {
+    @include media-breakpoint-up(sm) {
-      width: 80%;
+      max-width: 460px;
+    }
+
+    @include media-breakpoint-up(md) {
+      width: 50%;
     }
 
     .close {
-      right: 12px;
+      right: 3.6rem;
       top: 12px;
     }
   }
 }
 
 .noPadding {
+  background: none;
   padding: 0 2rem;
 }
 

src/components/Topic/Card.module.scss

@@ -1,4 +1,6 @@
 .topicContainer {
+  margin-top: 3.6rem;
+
   li:last-child & {
     border: none;
   }
@@ -8,9 +10,25 @@
   align-items: baseline;
   margin-top: 3.2rem;
 
-  .stats & {
+  @include media-breakpoint-down(sm) {
-    .topicDetailsItem {
+    margin: 0;
-      margin-bottom: 1.2rem;
+    position: relative;
+
+    &:not(.topicCompact) {
+      .topicDetails {
+        order: 2;
+      }
+
+      .controlContainer {
+        margin: 0;
+        position: relative;
+
+        button {
+          position: absolute;
+          right: 0;
+          top: 100%;
+        }
+      }
     }
   }
 }
@@ -62,7 +80,6 @@
 
 .topicDescription {
   @include font-size(1.4rem);
-
   font-weight: 500;
   color: #696969;
   line-height: 1.3;
@@ -76,50 +93,19 @@
   }
 }
 
-.topicDetails {
-  @include font-size(1.6rem);
-
-  color: #9fa1a7;
-  display: flex;
-  margin-bottom: 1em;
-
-  @include media-breakpoint-down(md) {
-    flex-wrap: wrap;
-  }
-}
-
-.topicDetailsItem {
-  @include font-size(1.4rem);
-
-  margin-right: 1.6rem;
-  white-space: nowrap;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &.compact {
-    font-size: small;
-  }
-
-  &.followers {
-    word-break: keep-all;
-  }
-
-  &.button {
-    float: right;
-  }
-}
-
 .controlContainer {
   margin-bottom: 1.6rem;
 
   @include media-breakpoint-up(sm) {
+    .topicCompact & {
       text-align: right;
     }
   }
+}
 
 .topicCompact {
+  margin-top: 2.4rem;
+
   .topicTitle {
     @include font-size(1.6rem);
   }

src/components/Topic/Card.tsx

@@ -26,6 +26,7 @@ interface TopicProps {
   showDescription?: boolean
   isCardMode?: boolean
   minimizeSubscribeButton?: boolean
+  isNarrow?: boolean
 }
 
 export const TopicCard = (props: TopicProps) => {
@@ -73,7 +74,14 @@ export const TopicCard = (props: TopicProps) => {
           [styles.topicInRow]: props.isTopicInRow
         }}
       >
-        <div classList={{ 'col-sm-18 col-md-24 col-lg-14 col-xl-15': !props.subscribeButtonBottom }}>
+        <div
+          classList={{
+            [clsx('col-sm-18 col-md-24 col-lg-14 col-xl-15', styles.topicDetails)]: props.isNarrow,
+            [clsx('col-12 col-xs-17 col-md-18', styles.topicDetails)]: props.compact,
+            [clsx('col-sm-17 col-md-18', styles.topicDetails)]:
+              !props.subscribeButtonBottom && !props.isNarrow && !props.compact
+          }}
+        >
           <Show when={props.topic.title && !props.isCardMode}>
             <h3 class={styles.topicTitle}>
               <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
@@ -103,7 +111,11 @@ export const TopicCard = (props: TopicProps) => {
         </div>
         <div
           class={styles.controlContainer}
-          classList={{ 'col-sm-6 col-md-24 col-lg-10 col-xl-9': !props.subscribeButtonBottom }}
+          classList={{
+            'col-sm-6 col-md-24 col-lg-10 col-xl-9': props.isNarrow,
+            'col-12 col-xs-7 col-md-6': props.compact,
+            'col-sm-7 col-md-6': !props.subscribeButtonBottom && !props.isNarrow && !props.compact
+          }}
         >
           <ShowOnlyOnClient>
             <Show when={isSessionLoaded()}>