Fix responsive issue in clud header

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.header.cloud.user-menu/user-menu.hbs

@@ -22,7 +22,7 @@
                         <span class="icon fw-stack fw-lg">
                             <i class="fw fw-organization fw-stack-1x" title=" {{@user.domain}}"></i>
                         </span>
-            <span class="hidden-xs">
+            <span class="hidden-xs username">
                 {{@user.domain}}
             </span>
 
@@ -175,7 +175,7 @@
                         <i class="fw fw-circle-outline fw-stack-2x" title="User"></i>
                         <i class="fw fw-user fw-stack-1x" title="User"></i>
                     </span>
-        <span class="hidden-xs">
+        <span class="hidden-xs username">
                 {{@user.username}}</span><span class="caret"></span>
         </a>
         <ul class="dropdown-menu dropdown-menu-right float-remove-xs position-static-xs text-center-xs remove-margin-xs slideInDown"

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.header.default.user-menu/user-menu.hbs

@@ -42,7 +42,7 @@
                     <div class="modal-header">
                         <h4 class="pull-left modal-title">
                 <span class="fw-stack">
-                    <i class="fw fw-user fw-stack-2x"></i>
+                    <i class="fw fw-user fw-stack-2x user-icon-black"></i>
                     <span class="fw-stack fw-move-right fw-move-bottom">
                       <i class="fw fw-circle-outline fw-stack-2x"></i>
                       <i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i>

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-common.css

@@ -16,12 +16,10 @@
  * under the License.
  */
 
-
 .wr-input-control .helper {
     font-weight: 100;
 }
 
-
 .wr-input-control .cus-col-25 {
     float: left;
     width: 25%;
@@ -53,6 +51,12 @@
 /*padding-left:20px;*/
 /*}*/
 
+.user-icon-black {
+    color: black !important;
+}
+
+/**/
+
 /* wizard */
 .wr-wizard {
 
@@ -99,6 +103,9 @@
 }
 
 @media only screen and (min-width: 768px) {
+    header .username {
+        max-width: calc(100% - 100px);
+    }
     body > .page-content-wrapper > .container,
     body > .page-content-wrapper > .container-fluid {
         margin: 1% 1% 1%;
@@ -110,6 +117,15 @@ header .brand h1 {
     text-transform: none !important;
 }
 
+header .username {
+    display: inline-block;
+    max-width: 180px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
 .visible-inline-block {
     display: inline-block !important;
 }
@@ -121,18 +137,22 @@ header .brand h1 {
     max-width: 32em;
     background-color: #006690
 }
-.cloud-menu .popover-title,.navbar-header .popover-title {
+
+.cloud-menu .popover-title, .navbar-header .popover-title {
     background-color: #006690;
     font-size: 16px;
     border-bottom: none;
     font-weight: 400;
 }
-.cloud-menu .popover.bottom>.arrow{
+
-    margin-left:-2px;
+.cloud-menu .popover.bottom > .arrow {
+    margin-left: -2px;
 }
-.cloud-menu .popover.bottom>.arrow:after,.navbar-header .popover.bottom>.arrow:after{
+
+.cloud-menu .popover.bottom > .arrow:after, .navbar-header .popover.bottom > .arrow:after {
     border-bottom-color: #006690;
 }
+
 .cloud-block {
     float: left;
     width: 8.2em;
@@ -142,11 +162,13 @@ header .brand h1 {
     text-align: center;
     vertical-align: middle;
 }
+
 .cloud-name {
-    font-size:14px;
+    font-size: 14px;
     margin-top: .5em;
     font-weight: 400;
 }
+
 .cloud-menu-popover {
     position: relative;
     float: right;
@@ -158,42 +180,50 @@ header .brand h1 {
     color: #fff;
     cursor: pointer;
 }
+
 #cloud-menu-popover-xs {
     color: #fff;
-    line-height:24px;
+    line-height: 24px;
     border: none;
-    margin-right: 15px!important;
+    margin-right: 15px !important;
 }
-.navbar-toggle{
+
-    border:none;
+.navbar-toggle {
+    border: none;
     border-radius: 0px;
 }
+
 .navbar-header .popover {
     border-radius: 0px;
     width: 21em;
-    max-width:32em;
+    max-width: 32em;
     background-color: #006690;
 }
-.navbar-header .popover .popover-content{
+
-    padding:0px;
+.navbar-header .popover .popover-content {
+    padding: 0px;
 }
+
 .cloud-menu .popover-content {
     padding: 0px;
 }
+
 .cloud-actions {
     background-color: #005578;
     float: left;
     position: absolute;
     width: 100%;
     left: 0px;
-    overflow:hidden;
+    overflow: hidden;
 }
+
 .cloud-actions h3 {
     font-size: 16px;
     font-weight: 400;
     padding-left: 14px;
     margin-top: 10px;
 }
+
 .cloud-block-invert {
     color: #fff;
     float: left;
@@ -210,21 +240,25 @@ header .brand h1 {
     background-color: #fff;
     cursor: pointer;
 }
+
 .cloud-actions a:hover {
     color: #d7d5d5;
     background-color: #3d3d3d;
     text-decoration: none
 }
+
 .cloud-apps a {
     text-decoration: none;
     color: #006690 !important;
     cursor: pointer
 }
+
 .cloud-apps a:hover {
     text-decoration: none;
     color: #006690;
     background-color: #c5c5c5;
 }
+
 .cloud-apps .cloud-actions a {
     color: #fff
 }