Update for #5764

Author: kkartunov

src/shared/components/Contentful/Tabs/themes/pills.scss

@@ -22,9 +22,9 @@ $text-color-black: #262628;
   border-bottom: none;
 
   @include xs-to-sm {
-    -webkit-flex-direction: column; /* Safari */
-    flex-direction: column;
+    overflow: auto;
     align-items: center;
+    justify-content: flex-start;
   }
 }
 
@@ -38,9 +38,11 @@ $text-color-black: #262628;
   cursor: pointer;
   border-radius: 15px;
   padding: 0 15px;
+  white-space: nowrap;
 
   @include xs-to-sm {
     margin: 2px;
+    padding: 0 25px;
   }
 
   &:hover {

src/shared/components/Contentful/Tabs/themes/vertical.scss

@@ -11,6 +11,10 @@ $gray-border-color: #e9e9e9;
   display: flex;
   max-width: $screen-lg;
   margin: auto;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 }
 
 .tablist {
@@ -24,6 +28,15 @@ $gray-border-color: #e9e9e9;
   border-right: 5px solid $gray-border-color;
   margin-right: 58px;
   padding: 7px 0;
+
+  @media (max-width: 768px) {
+    flex-direction: row;
+    border-right: none;
+    margin-right: 0;
+    margin-bottom: 15px;
+    overflow: auto;
+    padding: 0;
+  }
 }
 
 .tab {
@@ -35,6 +48,15 @@ $gray-border-color: #e9e9e9;
   cursor: pointer;
   padding-right: 30px;
 
+  @media (max-width: 768px) {
+    padding-right: 20px;
+    border-bottom: 5px solid $gray-border-color;
+
+    &:first-child {
+      padding-left: 7px;
+    }
+  }
+
   &:hover,
   &.selected {
     font-weight: 700;
@@ -52,6 +74,28 @@ $gray-border-color: #e9e9e9;
       border-radius: 5px;
       border-top: 1px solid white;
       border-bottom: 1px solid white;
+
+      @media (max-width: 768px) {
+        display: none;
+      }
+    }
+
+    p {
+      position: relative;
+
+      &::after {
+        @media (max-width: 768px) {
+          content: '';
+          background: $selected-color;
+          height: 5px;
+          width: 100%;
+          display: flex;
+          position: absolute;
+          border-radius: 15%;
+          border-left: 2px solid white;
+          border-right: 2px solid white;
+        }
+      }
     }
   }