Prevent long category names from breaking topic/category list layouts

app/assets/stylesheets/common/base/_topic-list.scss

@@ -17,6 +17,36 @@
   }
 }
 
+.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: block;
+    max-width: 35vw; 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @media screen and (max-width: 630px) {
+      max-width: 75vw; //single-column
+    }
+  }
+  &.with-topics {
+    .category-name {
+      max-width: 40vw;
+    }
+  } 
+}
+
 .topic-list-item.visited,
 .latest-topic-list-item.visited,
 .category-topic-link.visited {
@@ -111,6 +141,12 @@
     padding-left: 5px;
   }
 
+  span.badge-category {
+    .category-name {
+      max-width: 150px;
+    }
+  }
+
   .topic-excerpt {
     font-size: $font-down-1;
     margin-top: 5px;

app/assets/stylesheets/common/components/badges.scss

@@ -20,8 +20,15 @@
   font-weight: bold;
   white-space: nowrap;
   position: relative;
+  display: flex;
+  align-items: baseline;
   
   .badge-category {
+      display: inline-flex;
+      .category-name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
     .d-icon {
       margin-right: 3px;
     }
@@ -98,7 +105,7 @@
 
     span.badge-category {
       color: $primary;
-      padding: 3px;
+      padding: 1px 3px;
       overflow: hidden;
       text-overflow: ellipsis;
 

app/assets/stylesheets/desktop/topic-post.scss

@@ -423,7 +423,6 @@ nav.post-controls {
   clear: left;
   padding: 20px 0 15px 0;
   table {
-    table-layout: fixed;
     margin-top: 10px;
   }