Fixed mobile article footer

public/locales/en/translation.json

@@ -447,5 +447,6 @@
   "user already exist": "user already exists",
   "video": "video",
   "view": "view",
+  "viewsWithCount": "{count} {count, plural, one {view} other {views}}",
   "yesterday": "yesterday"
 }

public/locales/ru/translation.json

@@ -471,5 +471,6 @@
   "user already exist": "пользователь уже существует",
   "video": "видео",
   "view": "просмотр",
+  "viewsWithCount": "{count} {count, plural, one {просмотр} few {просмотрa} other {просмотров}}",
   "yesterday": "вчера"
 }

src/components/Article/Article.module.scss

@@ -390,12 +390,38 @@ img {
   }
 
   @include media-breakpoint-down(sm) {
-    flex: 1 100%;
+    flex: 1 40%;
   }
 }
 
 .shoutStatsItemViews {
   cursor: default;
+
+  @include media-breakpoint-down(sm) {
+    color: rgb(0 0 0 / 0.4);
+    flex: 1 40%;
+    justify-content: end;
+    margin-right: 0;
+    order: 10;
+
+    .icon {
+      display: none !important;
+    }
+  }
+}
+
+.shoutStatsItemLabel {
+  margin-left: 0.3em;
+
+  @include media-breakpoint-up(sm) {
+    display: none;
+  }
+}
+
+.shoutStatsItemCount {
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
 }
 
 .shoutStatsItemAdditionalDataItem {

src/components/Article/FullArticle.tsx

@@ -360,7 +360,10 @@ export const FullArticle = (props: Props) => {
                 <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
                   <Icon name="eye" class={styles.icon} />
                   <Icon name="eye" class={clsx(styles.icon, styles.iconHover)} />
-                  {props.article.stat?.viewed}
+                  <span class={styles.shoutStatsItemCount}>{props.article.stat?.viewed}</span>
+                  <span class={styles.shoutStatsItemLabel}>
+                    {t('viewsWithCount', { count: props.article.stat?.viewed })}
+                  </span>
                 </div>
               </Show>