Simplifying category overflow on category pages

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,

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;

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;

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