Fix long header title and Error messages overflow (#990)

Fix long header title and Error messages overflow
auth0 · Apr 28, 2017 · 650767d · 650767d
1 parent 9ebc611
commit 650767d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/css/index.styl b/css/index.styl
@@ -107,6 +107,7 @@ tabsHeight = 40px
       vertical-align middle
       display table-cell
       margin auto
+      overflow-y auto
 
   .auth0-lock-widget
     width 300px
@@ -118,7 +119,6 @@ tabsHeight = 40px
     margin 0 auto
     border-radius 5px
     max-height 100vh
-    overflow-y auto
 
     +breakpoint("mobile")
       -webkit-transition -webkit-transform .4s, opacity .3s
@@ -268,9 +268,17 @@ tabsHeight = 40px
   .auth0-lock-firstname
     font-size 18px
     margin-top 64px
+    text-overflow ellipsis
+    white-space nowrap
+    overflow hidden
+    padding 0 10px
 
   .auth0-lock-name
     font-size 22px
+    text-overflow ellipsis
+    white-space nowrap
+    overflow hidden
+    padding 0 10px
 
 
   // Lock body content

diff --git a/src/ui/box/header.jsx b/src/ui/box/header.jsx
@@ -58,7 +58,7 @@ class WelcomeMessage extends React.Component {
       message = title;
     }
 
-    return <div className={className}>{message}</div>;
+    return <div className={className} title={message}>{message}</div>;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,7 @@ class WelcomeMessage extends React.Component { @@
           message = title;
         }
-        return <div className={className}>{message}</div>;
+        return <div className={className} title={message}>{message}</div>;
       }
     }
@@ Expand Down @@