From 94f9e77203f68a5bde3d25c2fcaa0560f854ca0a Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 21 Nov 2022 00:23:12 +0300
Subject: [PATCH] Style fixes

---
 src/components/Discours/Banner.module.scss    |   5 -
 src/components/Discours/Banner.tsx            |  28 +++--
 src/components/Discours/Footer.module.scss    |   6 -
 src/components/Discours/Footer.tsx            |   2 +-
 src/components/Discours/Hero.scss             |   4 -
 src/components/Discours/Hero.tsx              |  58 ++++-----
 src/components/Discours/Subscribe.module.scss |   4 +
 src/components/Feed/Beside.tsx                | 118 +++++++++---------
 src/components/Feed/Group.tsx                 | 112 +++++++++--------
 src/components/Feed/Row1.tsx                  |   8 +-
 src/components/Feed/Row2.tsx                  |  35 +++---
 src/components/Feed/Row3.tsx                  |  20 +--
 src/components/Feed/Row5.tsx                  |  24 ++--
 src/components/Feed/RowShort.tsx              |  34 ++---
 src/components/Feed/Slider.tsx                |  56 +++++----
 src/components/Views/AllAuthors.tsx           |  86 +++++++------
 src/components/Views/AllTopics.tsx            |  36 +++---
 src/styles/app.scss                           |  17 ++-
 18 files changed, 331 insertions(+), 322 deletions(-)

diff --git a/src/components/Discours/Banner.module.scss b/src/components/Discours/Banner.module.scss
index 5a8bfc89..667b4a79 100644
--- a/src/components/Discours/Banner.module.scss
+++ b/src/components/Discours/Banner.module.scss
@@ -29,13 +29,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-left: 0;
   padding-top: 1em;
 
-  @include media-breakpoint-up(sm) {
-    padding-left: $grid-gutter-width;
-  }
-
   a {
     display: inline-block;
     margin: 0 1em 1em 0;
diff --git a/src/components/Discours/Banner.tsx b/src/components/Discours/Banner.tsx
index f14d2a8e..ed9bd925 100644
--- a/src/components/Discours/Banner.tsx
+++ b/src/components/Discours/Banner.tsx
@@ -6,19 +6,21 @@ import { clsx } from 'clsx'
 export default () => {
   return (
     <div class={styles.discoursBanner}>
-      <div class="wide-container row">
-        <div class={clsx(styles.discoursBannerContent, 'col-lg-5')}>
-          <h3>{t('Discours is created with our common effort')}</h3>
-          <p>
-            <a href="/about/help">{t('Support us')}</a>
-            <a href="/create">{t('Become an author')}</a>
-            <a href={''} onClick={() => showModal('auth')}>
-              {t('Join the community')}
-            </a>
-          </p>
-        </div>
-        <div class={clsx(styles.discoursBannerImage, 'col-lg-6 offset-lg-1')}>
-          <img src="/discours-banner.jpg" alt={t('Discours')} />
+      <div class="wide-container">
+        <div class="row">
+          <div class={clsx(styles.discoursBannerContent, 'col-lg-5')}>
+            <h3>{t('Discours is created with our common effort')}</h3>
+            <p>
+              <a href="/about/help">{t('Support us')}</a>
+              <a href="/create">{t('Become an author')}</a>
+              <a href={''} onClick={() => showModal('auth')}>
+                {t('Join the community')}
+              </a>
+            </p>
+          </div>
+          <div class={clsx(styles.discoursBannerImage, 'col-lg-6 offset-lg-1')}>
+            <img src="/discours-banner.jpg" alt={t('Discours')} />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Discours/Footer.module.scss b/src/components/Discours/Footer.module.scss
index 990b9ed6..624d5a47 100644
--- a/src/components/Discours/Footer.module.scss
+++ b/src/components/Discours/Footer.module.scss
@@ -34,12 +34,6 @@
     margin-top: 0.8rem;
   }
 
-  .wideContainer {
-    @include media-breakpoint-down(sm) {
-      padding: 0 $container-padding-x;
-    }
-  }
-
   ::selection {
     background: #fff;
     color: #000;
diff --git a/src/components/Discours/Footer.tsx b/src/components/Discours/Footer.tsx
index 1f5fe364..f22423d3 100644
--- a/src/components/Discours/Footer.tsx
+++ b/src/components/Discours/Footer.tsx
@@ -109,7 +109,7 @@ export const Footer = () => {
   ]
   return (
     <footer class={styles.discoursFooter}>
-      <div class={clsx('wide-container', styles.wideContainer)}>
+      <div class="wide-container">
         <div class="row">
           <For each={links()}>
             {({ header, items }) => (
diff --git a/src/components/Discours/Hero.scss b/src/components/Discours/Hero.scss
index 1a02d14b..fb8ab343 100644
--- a/src/components/Discours/Hero.scss
+++ b/src/components/Discours/Hero.scss
@@ -16,10 +16,6 @@
     font-weight: inherit;
   }
 
-  .wide-container {
-    padding: 0;
-  }
-
   ::selection {
     background: #fff;
     color: #000;
diff --git a/src/components/Discours/Hero.tsx b/src/components/Discours/Hero.tsx
index e94a9c97..7135418b 100644
--- a/src/components/Discours/Hero.tsx
+++ b/src/components/Discours/Hero.tsx
@@ -5,35 +5,37 @@ import { showModal } from '../../stores/ui'
 export default () => {
   return (
     <div class="about-discours">
-      <div class="wide-container row">
-        <div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
-          <h4>{t('Horizontal collaborative journalistic platform')}</h4>
-          <p>
-            {t(
-              'Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects'
-            )}
-            .
-            <br />
-            <em>
-              {t('We are convinced that one voice is good, but many is better') +
-                '. ' +
-                t('We create the most amazing stories together')}
+      <div class="wide-container">
+        <div class="row">
+          <div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
+            <h4>{t('Horizontal collaborative journalistic platform')}</h4>
+            <p>
+              {t(
+                'Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects'
+              )}
               .
-            </em>
-          </p>
-          <div class="about-discours__actions">
-            <a class="button" onClick={() => showModal('auth')}>
-              {t('Join the community')}
-            </a>
-            <a class="button" href="/create">
-              {t('Become an author')}
-            </a>
-            <a class="button" href="/about/manifest">
-              {t('About the project')}
-            </a>
-            <a class="button" href="/about/help">
-              {t('Support us')}
-            </a>
+              <br />
+              <em>
+                {t('We are convinced that one voice is good, but many is better') +
+                  '. ' +
+                  t('We create the most amazing stories together')}
+                .
+              </em>
+            </p>
+            <div class="about-discours__actions">
+              <a class="button" onClick={() => showModal('auth')}>
+                {t('Join the community')}
+              </a>
+              <a class="button" href="/create">
+                {t('Become an author')}
+              </a>
+              <a class="button" href="/about/manifest">
+                {t('About the project')}
+              </a>
+              <a class="button" href="/about/help">
+                {t('Support us')}
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/Discours/Subscribe.module.scss b/src/components/Discours/Subscribe.module.scss
index 1dabd314..50c0fe37 100644
--- a/src/components/Discours/Subscribe.module.scss
+++ b/src/components/Discours/Subscribe.module.scss
@@ -2,6 +2,10 @@
   display: flex;
   width: 100%;
 
+  @include media-breakpoint-down(md) {
+    margin-bottom: 2.4rem;
+  }
+
   @include media-breakpoint-between(md, xl) {
     flex-direction: column;
   }
diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx
index 06a3a33d..e97842fb 100644
--- a/src/components/Feed/Beside.tsx
+++ b/src/components/Feed/Beside.tsx
@@ -26,67 +26,69 @@ export const Beside = (props: BesideProps) => {
   return (
     <Show when={!!props.beside?.slug && props.values?.length > 0}>
       <div class="floor floor--9">
-        <div class="wide-container row">
-          <Show when={!!props.values}>
-            <div class="col-md-4">
-              <Show when={!!props.title}>
-                <div class={styles.besideColumnTitle}>
-                  <h4>{props.title}</h4>
+        <div class="wide-container">
+          <div class="row">
+            <Show when={!!props.values}>
+              <div class="col-md-4">
+                <Show when={!!props.title}>
+                  <div class={styles.besideColumnTitle}>
+                    <h4>{props.title}</h4>
 
-                  <Show when={props.wrapper === 'author'}>
-                    <a href="/authors">
-                      {t('All authors')}
-                      <Icon name="arrow-right" class={styles.icon} />
-                    </a>
-                  </Show>
+                    <Show when={props.wrapper === 'author'}>
+                      <a href="/authors">
+                        {t('All authors')}
+                        <Icon name="arrow-right" class={styles.icon} />
+                      </a>
+                    </Show>
 
-                  <Show when={props.wrapper === 'topic'}>
-                    <a href="/topics">
-                      {t('All topics')}
-                      <Icon name="arrow-right" class={styles.icon} />
-                    </a>
-                  </Show>
-                </div>
-              </Show>
-              <ul class={styles.besideColumn}>
-                <For each={[...props.values]}>
-                  {(value: Partial<Shout | User | Topic>) => (
-                    <li classList={{ [styles.top]: props.wrapper.startsWith('top-') }}>
-                      <Show when={props.wrapper === 'topic'}>
-                        <TopicCard
-                          topic={value as Topic}
-                          compact={props.isTopicCompact}
-                          shortDescription={props.topicShortDescription}
-                          isTopicInRow={props.isTopicInRow}
-                          iconButton={props.iconButton}
-                          showPublications={true}
-                        />
-                      </Show>
-                      <Show when={props.wrapper === 'author'}>
-                        <AuthorCard
-                          author={value as Author}
-                          compact={true}
-                          hasLink={true}
-                          truncateBio={true}
-                        />
-                      </Show>
-                      <Show when={props.wrapper === 'article' && value?.slug}>
-                        <ArticleCard article={value as Shout} settings={{ noimage: true }} />
-                      </Show>
-                      <Show when={props.wrapper === 'top-article' && value?.slug}>
-                        <ArticleCard
-                          article={value as Shout}
-                          settings={{ noimage: true, noauthor: true, nodate: true, isShort: true }}
-                        />
-                      </Show>
-                    </li>
-                  )}
-                </For>
-              </ul>
+                    <Show when={props.wrapper === 'topic'}>
+                      <a href="/topics">
+                        {t('All topics')}
+                        <Icon name="arrow-right" class={styles.icon} />
+                      </a>
+                    </Show>
+                  </div>
+                </Show>
+                <ul class={styles.besideColumn}>
+                  <For each={[...props.values]}>
+                    {(value: Partial<Shout | User | Topic>) => (
+                      <li classList={{ [styles.top]: props.wrapper.startsWith('top-') }}>
+                        <Show when={props.wrapper === 'topic'}>
+                          <TopicCard
+                            topic={value as Topic}
+                            compact={props.isTopicCompact}
+                            shortDescription={props.topicShortDescription}
+                            isTopicInRow={props.isTopicInRow}
+                            iconButton={props.iconButton}
+                            showPublications={true}
+                          />
+                        </Show>
+                        <Show when={props.wrapper === 'author'}>
+                          <AuthorCard
+                            author={value as Author}
+                            compact={true}
+                            hasLink={true}
+                            truncateBio={true}
+                          />
+                        </Show>
+                        <Show when={props.wrapper === 'article' && value?.slug}>
+                          <ArticleCard article={value as Shout} settings={{ noimage: true }} />
+                        </Show>
+                        <Show when={props.wrapper === 'top-article' && value?.slug}>
+                          <ArticleCard
+                            article={value as Shout}
+                            settings={{ noimage: true, noauthor: true, nodate: true, isShort: true }}
+                          />
+                        </Show>
+                      </li>
+                    )}
+                  </For>
+                </ul>
+              </div>
+            </Show>
+            <div class={clsx('col-md-8', styles.shoutCardContainer)}>
+              <ArticleCard article={props.beside} settings={{ isBigTitle: true, isBeside: true }} />
             </div>
-          </Show>
-          <div class={clsx('col-md-8', styles.shoutCardContainer)}>
-            <ArticleCard article={props.beside} settings={{ isBigTitle: true, isBeside: true }} />
           </div>
         </div>
       </div>
diff --git a/src/components/Feed/Group.tsx b/src/components/Feed/Group.tsx
index 761d6531..572dbd7f 100644
--- a/src/components/Feed/Group.tsx
+++ b/src/components/Feed/Group.tsx
@@ -14,66 +14,68 @@ export default (props: GroupProps) => {
   return (
     <div class="floor floor--important floor--group">
       <Show when={props.articles.length > 4}>
-        <div class="wide-container row">
-          <div class="group__header col-12">{props.header}</div>
+        <div class="wide-container">
+          <div class="row">
+            <div class="group__header col-12">{props.header}</div>
 
-          <div class="col-lg-6">
-            <ArticleCard
-              article={props.articles[0]}
-              settings={{ nosubtitle: false, noicon: true, isFloorImportant: true, isBigTitle: true }}
-            />
-          </div>
+            <div class="col-lg-6">
+              <ArticleCard
+                article={props.articles[0]}
+                settings={{ nosubtitle: false, noicon: true, isFloorImportant: true, isBigTitle: true }}
+              />
+            </div>
 
-          <div class="col-lg-6">
-            <div class="row">
-              <Show when={props.articles.length < 4}>
-                <For each={props.articles.slice(1, props.articles.length)}>
-                  {(a) => (
-                    <div class="row">
-                      <div class="col-md-8">
+            <div class="col-lg-6">
+              <div class="row">
+                <Show when={props.articles.length < 4}>
+                  <For each={props.articles.slice(1, props.articles.length)}>
+                    {(a) => (
+                      <div class="row">
+                        <div class="col-md-8">
+                          <ArticleCard
+                            article={a}
+                            settings={{ nosubtitle: false, noicon: true, isBigTitle: true }}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                </Show>
+                <Show when={props.articles.length >= 4}>
+                  <div class="col-md-6">
+                    <For each={props.articles.slice(1, 3)}>
+                      {(a) => (
                         <ArticleCard
                           article={a}
-                          settings={{ nosubtitle: false, noicon: true, isBigTitle: true }}
+                          settings={{
+                            noicon: true,
+                            noimage: true,
+                            isBigTitle: true,
+                            isCompact: true,
+                            isFloorImportant: true
+                          }}
                         />
-                      </div>
-                    </div>
-                  )}
-                </For>
-              </Show>
-              <Show when={props.articles.length >= 4}>
-                <div class="col-md-6">
-                  <For each={props.articles.slice(1, 3)}>
-                    {(a) => (
-                      <ArticleCard
-                        article={a}
-                        settings={{
-                          noicon: true,
-                          noimage: true,
-                          isBigTitle: true,
-                          isCompact: true,
-                          isFloorImportant: true
-                        }}
-                      />
-                    )}
-                  </For>
-                </div>
-                <div class="col-md-6">
-                  <For each={props.articles.slice(3, 5)}>
-                    {(a) => (
-                      <ArticleCard
-                        article={a}
-                        settings={{
-                          noicon: true,
-                          noimage: true,
-                          isBigTitle: true,
-                          isCompact: true,
-                          isFloorImportant: true
-                        }}
-                      />
-                    )}
-                  </For>
-                </div>
-              </Show>
+                      )}
+                    </For>
+                  </div>
+                  <div class="col-md-6">
+                    <For each={props.articles.slice(3, 5)}>
+                      {(a) => (
+                        <ArticleCard
+                          article={a}
+                          settings={{
+                            noicon: true,
+                            noimage: true,
+                            isBigTitle: true,
+                            isCompact: true,
+                            isFloorImportant: true
+                          }}
+                        />
+                      )}
+                    </For>
+                  </div>
+                </Show>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/Feed/Row1.tsx b/src/components/Feed/Row1.tsx
index bfb68aca..c5c07c87 100644
--- a/src/components/Feed/Row1.tsx
+++ b/src/components/Feed/Row1.tsx
@@ -5,9 +5,11 @@ import { ArticleCard } from './Card'
 export const Row1 = (props: { article: Shout }) => (
   <Show when={!!props.article}>
     <div class="floor floor--one-article">
-      <div class="wide-container row">
-        <div class="col-12">
-          <ArticleCard article={props.article} settings={{ isSingle: true }} />
+      <div class="wide-container">
+        <div class="row">
+          <div class="col-12">
+            <ArticleCard article={props.article} settings={{ isSingle: true }} />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx
index ac3a3a5a..573c4e6c 100644
--- a/src/components/Feed/Row2.tsx
+++ b/src/components/Feed/Row2.tsx
@@ -15,21 +15,26 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
 
   return (
     <div class="floor">
-      <div class="wide-container row">
-        <For each={props.articles}>
-          {(a, i) => {
-            return (
-              <Show when={!!a}>
-                <div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
-                  <ArticleCard
-                    article={a}
-                    settings={{ isWithCover: props.isEqual || x[y()][i()] === '8', nodate: props.isEqual }}
-                  />
-                </div>
-              </Show>
-            )
-          }}
-        </For>
+      <div class="wide-container">
+        <div class="row">
+          <For each={props.articles}>
+            {(a, i) => {
+              return (
+                <Show when={!!a}>
+                  <div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
+                    <ArticleCard
+                      article={a}
+                      settings={{
+                        isWithCover: props.isEqual || x[y()][i()] === '8',
+                        nodate: props.isEqual
+                      }}
+                    />
+                  </div>
+                </Show>
+              )
+            }}
+          </For>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/Feed/Row3.tsx b/src/components/Feed/Row3.tsx
index cf44806e..7c1e315e 100644
--- a/src/components/Feed/Row3.tsx
+++ b/src/components/Feed/Row3.tsx
@@ -6,15 +6,17 @@ import { ArticleCard } from './Card'
 export const Row3 = (props: { articles: Shout[]; header?: JSX.Element }) => {
   return (
     <div class="floor">
-      <div class="wide-container row">
-        <div class="floor-header">{props.header}</div>
-        <For each={props.articles}>
-          {(a) => (
-            <div class="col-md-4">
-              <ArticleCard article={a} />
-            </div>
-          )}
-        </For>
+      <div class="wide-container">
+        <div class="row">
+          <div class="floor-header">{props.header}</div>
+          <For each={props.articles}>
+            {(a) => (
+              <div class="col-md-4">
+                <ArticleCard article={a} />
+              </div>
+            )}
+          </For>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/Feed/Row5.tsx b/src/components/Feed/Row5.tsx
index f905d4ee..1cc9b3e8 100644
--- a/src/components/Feed/Row5.tsx
+++ b/src/components/Feed/Row5.tsx
@@ -4,17 +4,19 @@ import { ArticleCard } from './Card'
 export const Row5 = (props: { articles: Shout[] }) => {
   return (
     <div class="floor floor--1">
-      <div class="wide-container row">
-        <div class="col-md-3">
-          <ArticleCard article={props.articles[0]} />
-          <ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} />
-        </div>
-        <div class="col-md-6">
-          <ArticleCard article={props.articles[2]} settings={{ isBigTitle: true }} />
-        </div>
-        <div class="col-md-3">
-          <ArticleCard article={props.articles[3]} />
-          <ArticleCard article={props.articles[4]} settings={{ noimage: true, withBorder: true }} />
+      <div class="wide-container">
+        <div class="row">
+          <div class="col-md-3">
+            <ArticleCard article={props.articles[0]} />
+            <ArticleCard article={props.articles[1]} settings={{ noimage: true, withBorder: true }} />
+          </div>
+          <div class="col-md-6">
+            <ArticleCard article={props.articles[2]} settings={{ isBigTitle: true }} />
+          </div>
+          <div class="col-md-3">
+            <ArticleCard article={props.articles[3]} />
+            <ArticleCard article={props.articles[4]} settings={{ noimage: true, withBorder: true }} />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Feed/RowShort.tsx b/src/components/Feed/RowShort.tsx
index 94e474f0..1c0be00c 100644
--- a/src/components/Feed/RowShort.tsx
+++ b/src/components/Feed/RowShort.tsx
@@ -4,22 +4,24 @@ import { ArticleCard } from './Card'
 
 export default (props: { articles: Shout[] }) => (
   <div class="floor floor--7">
-    <div class="wide-container row">
-      <For each={props.articles}>
-        {(a) => (
-          <div class="col-md-6 col-lg-3">
-            <ArticleCard
-              article={a}
-              settings={{
-                additionalClass: 'shout-card--content-top',
-                isWithCover: true,
-                isBigTitle: true,
-                isVertical: true
-              }}
-            />
-          </div>
-        )}
-      </For>
+    <div class="wide-container">
+      <div class="row">
+        <For each={props.articles}>
+          {(a) => (
+            <div class="col-md-6 col-lg-3">
+              <ArticleCard
+                article={a}
+                settings={{
+                  additionalClass: 'shout-card--content-top',
+                  isWithCover: true,
+                  isBigTitle: true,
+                  isVertical: true
+                }}
+              />
+            </div>
+          )}
+        </For>
+      </div>
     </div>
   </div>
 )
diff --git a/src/components/Feed/Slider.tsx b/src/components/Feed/Slider.tsx
index 067412d9..e0fe443d 100644
--- a/src/components/Feed/Slider.tsx
+++ b/src/components/Feed/Slider.tsx
@@ -61,34 +61,36 @@ export default (props: SliderProps) => {
 
   return (
     <div class="floor floor--important">
-      <div class="wide-container row">
-        <h2 class="col-12">{props.title}</h2>
-        <Show when={!!articles()}>
-          <div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
-            <div class="swiper-wrapper">
-              <For each={articles()}>
-                {(a: Shout) => (
-                  <ArticleCard
-                    article={a}
-                    settings={{
-                      additionalClass: 'swiper-slide',
-                      isFloorImportant: true,
-                      isWithCover: isCardsWithCover,
-                      nodate: true
-                    }}
-                  />
-                )}
-              </For>
+      <div class="wide-container">
+        <div class="row">
+          <h2 class="col-12">{props.title}</h2>
+          <Show when={!!articles()}>
+            <div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
+              <div class="swiper-wrapper">
+                <For each={articles()}>
+                  {(a: Shout) => (
+                    <ArticleCard
+                      article={a}
+                      settings={{
+                        additionalClass: 'swiper-slide',
+                        isFloorImportant: true,
+                        isWithCover: isCardsWithCover,
+                        nodate: true
+                      }}
+                    />
+                  )}
+                </For>
+              </div>
+              <div class="slider-arrow-next" ref={nextEl} onClick={() => swiper()?.slideNext()}>
+                <Icon name="slider-arrow" class={'icon'} />
+              </div>
+              <div class="slider-arrow-prev" ref={prevEl} onClick={() => swiper()?.slidePrev()}>
+                <Icon name="slider-arrow" class={'icon'} />
+              </div>
+              <div class="slider-pagination" ref={pagEl} />
             </div>
-            <div class="slider-arrow-next" ref={nextEl} onClick={() => swiper()?.slideNext()}>
-              <Icon name="slider-arrow" class={'icon'} />
-            </div>
-            <div class="slider-arrow-prev" ref={prevEl} onClick={() => swiper()?.slidePrev()}>
-              <Icon name="slider-arrow" class={'icon'} />
-            </div>
-            <div class="slider-pagination" ref={pagEl} />
-          </div>
-        </Show>
+          </Show>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 3b2bcc25..52addabb 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -151,7 +151,7 @@ export const AllAuthorsView = (props: Props) => {
                               <div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
                                 <div class="topic-title">
                                   <a href={`/author/${author.slug}`}>{author.name}</a>
-                                  <sup>{author.stat.shouts}</sup>
+                                  <span class={styles.articlesCounter}>{author.stat.shouts}</span>
                                 </div>
                               </div>
                             )}
@@ -165,53 +165,51 @@ export const AllAuthorsView = (props: Props) => {
             </For>
           </Show>
 
-          <div class={styles.stats}>
-            <Show when={searchResults().length > 0}>
-              <For each={searchResults().slice(0, limit())}>
-                {(author) => (
-                  <AuthorCard
-                    author={author}
-                    compact={false}
-                    hasLink={true}
-                    subscribed={subscribed(author.slug)}
-                    noSocialButtons={true}
-                    isAuthorsList={true}
-                    truncateBio={true}
-                  />
-                )}
-              </For>
-            </Show>
+          <Show when={searchResults().length > 0}>
+            <For each={searchResults().slice(0, limit())}>
+              {(author) => (
+                <AuthorCard
+                  author={author}
+                  compact={false}
+                  hasLink={true}
+                  subscribed={subscribed(author.slug)}
+                  noSocialButtons={true}
+                  isAuthorsList={true}
+                  truncateBio={true}
+                />
+              )}
+            </For>
+          </Show>
 
-            <Show when={searchParams().by && searchParams().by !== 'name'}>
-              <div class="row">
-                <div class="col-lg-10 col-xl-9">
-                  <For each={sortedAuthors().slice(0, limit())}>
-                    {(author) => (
-                      <AuthorCard
-                        author={author}
-                        compact={false}
-                        hasLink={true}
-                        subscribed={subscribed(author.slug)}
-                        noSocialButtons={true}
-                        isAuthorsList={true}
-                        truncateBio={true}
-                      />
-                    )}
-                  </For>
-                </div>
+          <Show when={searchParams().by && searchParams().by !== 'name'}>
+            <div class="row">
+              <div class="col-lg-10 col-xl-9">
+                <For each={sortedAuthors().slice(0, limit())}>
+                  {(author) => (
+                    <AuthorCard
+                      author={author}
+                      compact={false}
+                      hasLink={true}
+                      subscribed={subscribed(author.slug)}
+                      noSocialButtons={true}
+                      isAuthorsList={true}
+                      truncateBio={true}
+                    />
+                  )}
+                </For>
               </div>
-            </Show>
+            </div>
+          </Show>
 
-            <Show when={sortedAuthors().length > limit()}>
-              <div class="row">
-                <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
-                  <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                    {t('Load more')}
-                  </button>
-                </div>
+          <Show when={sortedAuthors().length > limit()}>
+            <div class="row">
+              <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
+                <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
+                  {t('Load more')}
+                </button>
               </div>
-            </Show>
-          </div>
+            </div>
+          </Show>
         </div>
       </Show>
     </div>
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index d2017c8c..a28c71da 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -92,24 +92,26 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   }
 
   const AllTopicsHead = () => (
-    <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
-      <h1>{t('Topics')}</h1>
-      <p>{t('Subscribe what you like to tune your personal feed')}</p>
+    <div class="row">
+      <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
+        <h1>{t('Topics')}</h1>
+        <p>{t('Subscribe what you like to tune your personal feed')}</p>
 
-      <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
-        <li classList={{ selected: searchParams().by === 'shouts' }}>
-          <a href="/topics?by=shouts">{t('By shouts')}</a>
-        </li>
-        <li classList={{ selected: searchParams().by === 'authors' }}>
-          <a href="/topics?by=authors">{t('By authors')}</a>
-        </li>
-        <li classList={{ selected: searchParams().by === 'title' }}>
-          <a href="/topics?by=title">{t('By title')}</a>
-        </li>
-        <li class="view-switcher__search">
-          <SearchField onChange={searchTopics} />
-        </li>
-      </ul>
+        <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
+          <li classList={{ selected: searchParams().by === 'shouts' }}>
+            <a href="/topics?by=shouts">{t('By shouts')}</a>
+          </li>
+          <li classList={{ selected: searchParams().by === 'authors' }}>
+            <a href="/topics?by=authors">{t('By authors')}</a>
+          </li>
+          <li classList={{ selected: searchParams().by === 'title' }}>
+            <a href="/topics?by=title">{t('By title')}</a>
+          </li>
+          <li class="view-switcher__search">
+            <SearchField onChange={searchTopics} />
+          </li>
+        </ul>
+      </div>
     </div>
   )
 
diff --git a/src/styles/app.scss b/src/styles/app.scss
index e8aad0b3..34ae8298 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -550,10 +550,6 @@ figcaption {
     margin-bottom: 6.4rem;
   }
 
-  .wide-container {
-    padding: 0;
-  }
-
   .container {
     padding-left: $container-padding-x;
     padding-right: $container-padding-x;
@@ -617,14 +613,14 @@ figcaption {
   }
 }
 
-.row > * {
+.row {
   @include media-breakpoint-down(sm) {
-    padding-left: divide($container-padding-x, 2);
-    padding-right: divide($container-padding-x, 2);
+    margin-left: divide(-$container-padding-x, 2);
+    margin-right: divide(-$container-padding-x, 2);
 
-    > .row {
-      margin-left: divide(-$container-padding-x, 2);
-      margin-right: divide(-$container-padding-x, 2);
+    > * {
+      padding-left: divide($container-padding-x, 2);
+      padding-right: divide($container-padding-x, 2);
     }
   }
 }
@@ -789,6 +785,7 @@ details {
 .text-truncate {
   display: -webkit-box !important;
   overflow: hidden;
+  position: relative;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   white-space: normal;