Improve the display of user name in the user menu. (CO-2568)

app/resources/locales/en_US/default.po

@@ -813,3 +813,6 @@ msgstr "Matchgrid: {0}"
 
 msgid "match.ti.properties"
 msgstr "Properties"
+
+msgid "match.ti.user"
+msgstr "User"

app/templates/element/menuTop.php

@@ -67,7 +67,7 @@
     <li id="top-menu-user">
       <a class="dropdown-toggle nospin" href="#" role="button" id="user-panel-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="top-menu-link-text">
-          <?= $vv_user['username']; ?>
+          <?= __('match.ti.user'); ?>
         </span>
         <em class="material-icons icon-adjust">person</em>
       </a>
@@ -83,8 +83,8 @@
         </div>
         <div id="user-panel-user-info">
           <em class="material-icons">person</em>
-          <div id="user-panel-cn"><?= $vv_user['username']; ?></div>
-          <div id="user-panel-id"><?php print $this->getRequest()->getSession()->read('Auth.User.username'); ?></div>
+          <div id="user-panel-cn"><?= __('match.ti.user'); ?></div>
+          <div id="user-panel-id"><?= $vv_user['username']; ?></div>
         </div>
 
         <?php if(count($vv_matchgrids) > 1): // More than one Matchgrid is available, so present the switch button ?>

app/webroot/css/co-base.css

@@ -211,11 +211,6 @@ body.logged-in #top-menu {
   max-width: 80vw;
   word-wrap:break-word;
 }
-#user-panel-user-info { /* mobile only styling */
-  border-top: 1px solid var(--cmg-color-lightgray-006);
-  margin-top: 1em;
-  padding-top: 1em;
-}
 #user-panel-user-info .material-icons {
   float: left;
   font-size: 5em;
@@ -313,14 +308,17 @@ body.logged-in #top-menu {
   display: none;
 }
 #logout-in-panel {
-  margin: 4px 0 -8px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 8px 0 -8px;
   text-align: right;
 }
 #login .material-icons, 
 #logout-in-panel .material-icons {
   font-size: 1rem;
   vertical-align: top;
-  margin-top: 0.25rem;
+  margin-top: 5px;
 }
 #login .material-icons {
   margin: 0.5rem 0;

app/webroot/css/co-responsive.css

@@ -60,15 +60,13 @@
     min-width: 400px;
     max-width: unset;
   }
+  #user-panel-id {
+    white-space: nowrap;
+    word-wrap: unset;
+    max-width: unset;
+  }
   #user-panel-user-info {
-    border-top: none;
     margin: 0 80px 0 0;
-    padding-top: 0;
-  }
-  #logout-in-panel {
-    position: absolute;
-    top: 0;
-    right: 0;
   }
   #siteTitle {
     min-height: 46px;