Replace the username button by a dropdown menu

customize.dist/main.css

@@ -376,7 +376,7 @@
   background: #bbb;
 }
 .dropdown-bar .dropdown-bar-content p {
-  width: 210px;
+  min-width: 160px;
   padding: 5px;
   margin: 0;
   white-space: normal;

customize.dist/src/less/dropdown.less

@@ -63,7 +63,7 @@
         }
 
         p {
-            width: 210px;
+            min-width: 160px;
             padding: 5px;
             margin: 0;
             white-space: normal;

customize.dist/src/less/toolbar.less

@@ -26,6 +26,8 @@
     box-sizing: border-box;
     padding: 0px 6px;
 
+    .fa {font-family: FontAwesome;}
+
     .unselectable;
 
     font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
@@ -287,10 +289,17 @@
     font-weight: bold;
     text-transform: uppercase;
 }
-.cryptpad-toolbar-username {
-    line-height: 32px;
-    button {
-        line-height: initial;
+        .fa-user {
+            margin-right: 5px;
+        }
+.cryptpad-user {
+    .buttonTitle {
+        .fa-user {
+            margin-right: 5px;
+        }
+        .cryptpad-toolbar-username {
+            margin-right: 5px;
+        }
     }
 }
 .lag {

customize.dist/toolbar.css

@@ -45,7 +45,7 @@
   background: #bbb;
 }
 .dropdown-bar .dropdown-bar-content p {
-  width: 210px;
+  min-width: 160px;
   padding: 5px;
   margin: 0;
   white-space: normal;
@@ -103,6 +103,9 @@
   width: 100%;
   z-index: 9001;
 }
+.cryptpad-toolbar .fa {
+  font-family: FontAwesome;
+}
 .cryptpad-toolbar a {
   float: right;
 }
@@ -357,11 +360,14 @@
   font-weight: bold;
   text-transform: uppercase;
 }
-.cryptpad-toolbar-username {
-  line-height: 32px;
+.fa-user {
+  margin-right: 5px;
 }
-.cryptpad-toolbar-username button {
-  line-height: initial;
+.cryptpad-user .buttonTitle .fa-user {
+  margin-right: 5px;
+}
+.cryptpad-user .buttonTitle .cryptpad-toolbar-username {
+  margin-right: 5px;
 }
 .lag {
   height: 15px !important;