diff --git a/new-branding/src/components/blog/ArticleCard/index.scss b/new-branding/src/components/blog/ArticleCard/index.scss index 4aeef8b..06d7f3d 100644 --- a/new-branding/src/components/blog/ArticleCard/index.scss +++ b/new-branding/src/components/blog/ArticleCard/index.scss @@ -185,9 +185,12 @@ a { color: inherit; text-decoration: none; + display: -webkit-box; + -webkit-line-clamp: inherit; + -webkit-box-orient: vertical; + overflow: hidden; word-break: break-word; overflow-wrap: anywhere; - white-space: normal; } } @@ -211,6 +214,7 @@ } &__title { + height: 70px; font-size: 20px; line-height: 115%; } diff --git a/new-branding/src/components/blog/FilterBar/index.scss b/new-branding/src/components/blog/FilterBar/index.scss index f8c470b..5409737 100644 --- a/new-branding/src/components/blog/FilterBar/index.scss +++ b/new-branding/src/components/blog/FilterBar/index.scss @@ -106,10 +106,33 @@ @media (max-width: 1100px) { .filter-bar { position: relative; - flex-direction: column; + display: flex; align-items: center; - .filter-bar__sort { + &__tabs { + display: flex; + width: max-content; + + &--wraper { + flex: 1; + min-width: 0; + + overflow-x: auto; + overflow-y: hidden; + + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + } + + &__tab { + flex-shrink: 0; + } + + &__sort { position: absolute; right: 10px; top: -40px; diff --git a/new-branding/src/components/blog/FilterBar/index.tsx b/new-branding/src/components/blog/FilterBar/index.tsx index 7e37aeb..3bc7299 100644 --- a/new-branding/src/components/blog/FilterBar/index.tsx +++ b/new-branding/src/components/blog/FilterBar/index.tsx @@ -22,21 +22,23 @@ export const FilterBar = ({ tabs, activeTab, sort, onTabChange, onSortChange }: return (
-
- {tabs.map(tab => ( - - ))} +
+
+ {tabs.map(tab => ( + + ))} +