Merge pull request #5326 from Tainan404/issue-5287

Fix clipped username in chat and user list

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss

@@ -65,32 +65,30 @@
   }
 }
 
-.name {
+.name, .logout {
   display: flex;
   min-width: 0;
   font-weight: 600;
-  color: $color-heading;
-  width: 100%;
   position: relative;
 
   > span {
     @extend %text-elipsis;
     padding: .5rem 0;
-    position: absolute;
-    top: -.5rem;
-    width: 100%;
+    margin-top: -.5rem;
+    margin-bottom: -.5rem;
   }
 }
 
+.name {
+  color: $color-heading;
+}
+
 .logout {
-  display: flex;
-  min-width: 0;
-  font-weight: 600;
   text-transform: capitalize;
   font-style: italic;
-
-  > span {
-    @extend %text-elipsis;
+  & > span {
+    text-align: right;
+    padding-right: .1rem;
   }
 }
 
@@ -99,7 +97,6 @@
   font-weight: 100;
   text-transform: lowercase;
   font-style: italic;
-  margin-left: .25rem;
   font-size: 90%;
   line-height: 1;
   align-self: center;

bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss

@@ -44,6 +44,8 @@
   margin-left: $sm-padding-x;
   position: relative;
   top: $md-padding-y;
+  padding: .5rem 0;
+  margin-top: -.5rem;
 }
 
 .active {