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-responsive.css

@@ -60,6 +60,10 @@
     min-width: 400px;
     max-width: unset;
   }
+  #user-panel-id {
+    white-space: nowrap;
+    word-wrap: unset;
+  }
   #user-panel-user-info {
     border-top: none;
     margin: 0 80px 0 0;