From 5a2c7bd4ce51c8f61f3b2d43340be15ebc752c6b Mon Sep 17 00:00:00 2001
From: Lynx Kotoura <admin@sanin.link>
Date: Sat, 7 Oct 2017 03:40:17 +0900
Subject: [PATCH] Fix overflowing in web UI (#5246)

* Fix overflowing in web UI

* Revert fixing dropdown menu modal
---
 app/javascript/styles/components.scss | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 7609ac005..aecc98e76 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -731,6 +731,12 @@
   .status__display-name strong {
     color: $ui-base-lighter-color;
   }
+
+  > span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .status__action-bar {
@@ -895,9 +901,12 @@
   .account__header__display-name {
     color: $primary-text-color;
     display: inline-block;
+    width: 100%;
     font-size: 20px;
     line-height: 27px;
     font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .account__header__username {
@@ -906,6 +915,8 @@
     font-weight: 400;
     display: block;
     margin-bottom: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 
@@ -1081,6 +1092,8 @@
 
 .account__display-name strong {
   display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .detailed-status__application,
@@ -1158,6 +1171,12 @@
   .fa {
     color: $ui-highlight-color;
   }
+
+  > span {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .notification__favourite-icon-wrapper {
@@ -1265,11 +1284,14 @@
 .navigation-bar__profile {
   flex: 1 1 auto;
   margin-left: 8px;
+  overflow: hidden;
 }
 
 .navigation-bar__profile-account {
   display: block;
   font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .navigation-bar__profile-edit {