diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index 15f361a0c27..6bc899d66ff 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -17,36 +17,7 @@ } } -.categories-and-latest { - .latest-topic-list { - span.badge-category { - .category-name { - max-width: 25vw; - @media screen and (max-width: 630px) { - max-width: 65vw; //single-column - } - } - } - } -} -.category-list { - .category-name { - display: inline-block; - max-width: 30vw; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: text-bottom; - @media screen and (max-width: 630px) { - max-width: 65vw; //single-column - } - } - &.with-topics { - .category-name { - max-width: 40vw; - } - } -} .topic-list-item.visited, .latest-topic-list-item.visited, diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss index 62faa65cfe2..e44077875fb 100644 --- a/app/assets/stylesheets/common/base/category-list.scss +++ b/app/assets/stylesheets/common/base/category-list.scss @@ -1,3 +1,15 @@ +.category-list { + table-layout: fixed; + .category-name { + display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: text-top; + line-height: $line-height-medium; + } +} + .category-boxes, .category-boxes-with-topics { display: flex; flex-wrap: wrap; diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss index b19c016475f..16cbb60b6b0 100644 --- a/app/assets/stylesheets/desktop/latest-topic-list.scss +++ b/app/assets/stylesheets/desktop/latest-topic-list.scss @@ -23,8 +23,15 @@ } .main-link { @extend .topic-list-main-link; - flex: 15; + flex: 0 1 auto; + max-width: 65%; font-size: $font-0; + .badge-wrapper { + max-width: 100%; + .badge-category-bg { + flex-shrink: 0; + } + } .top-row { margin-bottom: 0.1em; diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 8fdff1c9a23..53c9c98f03a 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -232,6 +232,10 @@ tr.category-topic-link { } } + .category-name { + max-width: 80vw; + } + .category-topic-link .main-link, .subcategories-list td, .category-description td { padding-left: 10px; }