UX: truncate long topic tiles to prevent badges and date from wrapping

UX: truncate long topic tiles to prevent badges and date from wrapping

From 72bd388ff799491697fd82cc28c9647d8e7af3bc Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Tue, 4 Dec 2018 15:27:23 +0800
Subject: [PATCH] UX: truncate long topic tiles to prevent badges and date from
 wrapping


diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 31f6a01..4cdf6ea 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -62,22 +62,23 @@
     margin: 10px 0 0;
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
-
     &:first-of-type {
       margin-top: 13px;
     }
-
     a.last-posted-at,
     a.last-posted-at:visited {
       font-size: $font-down-1;
       color: dark-light-choose($primary-medium, $secondary-high);
     }
-
     .topic-statuses .fa {
       color: dark-light-choose($primary-medium, $secondary-high);
     }
-
+    .title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 0 1 auto;
+    }
     .topic-post-badges .badge.new-posts,
     .title {
       margin-right: 5px;

GitHub

1 Like