Fixed text-overflow

2 files changed, 23 insertions, 7 deletions

diff --git a/app.css b/app.css
index 0b3ea23..628b0ce 100644
--- a/app.css
+++ b/app.css
@@ -187,9 +187,15 @@ body {
     padding: 0; }
     body #main-section h2 {
       border-bottom: 1px dashed #ccc;
-      padding-bottom: 10px; }
+      padding-bottom: 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
     body #main-section .title {
-      font-size: 1.1em; }
+      font-size: 1.1em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
     body #main-section .subtitle {
       font-size: .9em;
       white-space: nowrap;
@@ -205,7 +211,8 @@ body {
       body #main-section .message .message-body {
         border: none; }
   body .media-content {
-    overflow: inherit; }
+    overflow: hidden;
+    text-overflow: inherit; }
   body .tag {
     color: #4285f4;
     background-color: #4285f4;
diff --git a/app.scss b/app.scss
index 2b726c8..51110e1 100644
--- a/app.scss
+++ b/app.scss
@@ -81,6 +81,14 @@ $theme-dark: (
   }
 }
 
+
+@mixin ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
 html { 
   height: 100%; 
 }
@@ -205,17 +213,17 @@ body {
     h2 {
       border-bottom: 1px dashed #ccc;
       padding-bottom: 10px;
+      @include ellipsis();
     }
 
     .title {
       font-size: 1.1em;
+      @include ellipsis();
     }
 
     .subtitle {
       font-size: .9em;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @include ellipsis();
     }
 
     .container {
@@ -237,7 +245,8 @@ body {
   }
 
   .media-content {
-    overflow: inherit;
+    overflow: hidden;
+    text-overflow: inherit;
   }
 
   .tag {