From de9679101ef6d6180cdc44dacacb8ed3a6af3dde Mon Sep 17 00:00:00 2001
From: Sean Li <mail@shang.li>
Date: Fri, 12 Jun 2015 12:03:03 -0700
Subject: [PATCH] Fixed long username and adjusted verify account layout.

---
 src/components/Header.react.js             |  7 ++++++-
 src/components/NewContainerSearch.react.js |  2 +-
 styles/header.less                         | 17 ++++++++++-------
 styles/new-container.less                  |  2 +-
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/Header.react.js b/src/components/Header.react.js
index 076cb22ffc..a6c4ed7f0b 100644
--- a/src/components/Header.react.js
+++ b/src/components/Header.react.js
@@ -128,7 +128,12 @@ var Header = React.createClass({
       username = (
         <div className="login-wrapper">
           <div className="login no-drag" onClick={this.handleUserClick}>
-            <span className="icon icon-user"></span> {this.state.username} {this.state.verified ? null : '(Unverified)'} <RetinaImage src="userdropdown.png"/>
+            <span className="icon icon-user"></span>
+              <span className="text">
+                {this.state.username}
+                {this.state.verified ? null : '(Unverified)'}
+              </span>
+              <RetinaImage src="userdropdown.png"/>
           </div>
         </div>
       );
diff --git a/src/components/NewContainerSearch.react.js b/src/components/NewContainerSearch.react.js
index 954d0eafa3..d5ce1ab14a 100644
--- a/src/components/NewContainerSearch.react.js
+++ b/src/components/NewContainerSearch.react.js
@@ -126,7 +126,7 @@ module.exports = React.createClass({
         <div className="no-results">
           <h2>Please verify your Docker Hub account email address</h2>
           <div className="verify">
-            <button className="btn btn-primary btn-lg" onClick={this.handleCheckVerification}>{'I\'ve Verified My Email Address'}</button> {spinner}
+            <button className="btn btn-primary" onClick={this.handleCheckVerification}>{'I\'ve Verified My Email Address'}</button> {spinner}
           </div>
           <RetinaImage src="inspection.png" checkIfRetinaImgExists={false}/>
         </div>
diff --git a/styles/header.less b/styles/header.less
index 671e5c3c0c..633832f881 100644
--- a/styles/header.less
+++ b/styles/header.less
@@ -46,15 +46,18 @@
     border-right: 1px solid @color-divider;
     padding: 0 1rem 0 1rem;
     .box-button();
-
-    &:active {
-      img, span {
-        -webkit-filter: brightness(0.9);
-      }
+    .text {
+      width: 70px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-
     img {
-      margin: 0 5px;
+      position: relative;
+      top: 0.1rem;
+      margin: 0 0rem 0 0.4rem;
+      width: 8px;
+      height: 5px;
     }
   }
 
diff --git a/styles/new-container.less b/styles/new-container.less
index 61f99f719b..87ae185225 100644
--- a/styles/new-container.less
+++ b/styles/new-container.less
@@ -55,7 +55,7 @@
       }
 
       .verify {
-        margin: 15px 0;
+        margin: 0.5rem 0 3rem 0;
         position: relative;
 
         .spinner {