From e32691a3e9268ef78b9a1c65df74f37e17e3c9bc Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 27 Feb 2018 13:10:28 -0500
Subject: [PATCH] Simplifying category overflow on category pages

---
 .../stylesheets/common/base/_topic-list.scss  | 29 -------------------
 .../common/base/category-list.scss            | 12 ++++++++
 .../desktop/latest-topic-list.scss            |  9 +++++-
 app/assets/stylesheets/mobile/topic-list.scss |  4 +++
 4 files changed, 24 insertions(+), 30 deletions(-)

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;
   }