Fixing text overflow / wrapping for titles and markdown. Fixes #414

diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css
index 20b669b850ec2c43f0e7f9b3d99129c7931fd84f..9a0fc52ba4a3e66afb5e27fd721069f2b3598083 100644 (file)
--- a/ui/assets/css/main.css
+++ b/ui/assets/css/main.css
@@ -27,6 +27,11 @@
   margin-top: -10px;
 }
 
+.md-div p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .md-div p:last-child {
   margin-bottom: 0px;
 }
@@ -138,3 +143,8 @@ hr {
 .emoji {
   height: 1.2em !important;
 }
+
+.text-wrap-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis
+}

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index ee28c6b43effb5a8714701e22e6fa409e4382329..227ad87aa7a88f5930304a9c9dcda98d54d3d1a8 100644 (file)
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -162,7 +162,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           </video>
         )}
         <div className="ml-4">
-          <div className="post-title">
+          <div className="post-title text-wrap-truncate">
             <h5 className="mb-0 d-inline">
               {post.url ? (
                 <a