fix: visual bugs

Author: SychO9

framework/core/js/src/admin/components/SessionDropdown.tsx

@@ -28,7 +28,13 @@ export default class SessionDropdown<CustomAttrs extends ISessionDropdownAttrs =
   getButtonContent() {
     const user = app.session.user;
 
-    return [<Avatar user={user} />, ' ', <span className="Button-label">{username(user)}</span>];
+    return [
+      <Avatar user={user} />,
+      ' ',
+      <span className="Button-label">
+        <span className="Button-labelText">{username(user)}</span>
+      </span>,
+    ];
   }
 
   /**

framework/core/js/src/common/components/SelectDropdown.tsx

@@ -50,7 +50,9 @@ export default class SelectDropdown<CustomAttrs extends ISelectDropdownAttrs = I
     let label = (activeChild && typeof activeChild === 'object' && 'children' in activeChild && activeChild.children) || this.attrs.defaultLabel;
 
     return [
-      <span className="Button-label">{label}</span>,
+      <span className="Button-label">
+        <span className="Button-labelText">{label}</span>
+      </span>,
       this.attrs.caretIcon ? <Icon name={this.attrs.caretIcon} className="Button-caret" /> : null,
     ];
   }

framework/core/js/src/forum/components/HeaderDropdown.tsx

@@ -44,7 +44,9 @@ export default abstract class HeaderDropdown<CustomAttrs extends IHeaderDropdown
     return [
       this.attrs.icon ? <Icon name={this.attrs.icon} className="Button-icon" /> : null,
       unread !== 0 && <span className="Bubble HeaderDropdownBubble">{unread}</span>,
-      <span className="Button-label">{this.attrs.label}</span>,
+      <span className="Button-label">
+        <span className="Button-labelText">{this.attrs.label}</span>
+      </span>,
     ];
   }
 

framework/core/js/src/forum/components/SessionDropdown.tsx

@@ -33,7 +33,13 @@ export default class SessionDropdown<CustomAttrs extends ISessionDropdownAttrs =
   getButtonContent() {
     const user = app.session.user;
 
-    return [<Avatar user={user} />, ' ', <span className="Button-label">{username(user)}</span>];
+    return [
+      <Avatar user={user} />,
+      ' ',
+      <span className="Button-label">
+        <span className="Button-labelText">{username(user)}</span>
+      </span>,
+    ];
   }
 
   /**

framework/core/less/common/App.less

@@ -211,7 +211,7 @@
     }
     .FormControl, .ButtonGroup, .Button {
       width: 100%;
-      text-align: left;
+      justify-content: start;
     }
     .Dropdown-menu {
       .ButtonGroup, .Button {

framework/core/less/forum/DiscussionListItem.less

@@ -36,6 +36,10 @@
 }
 .DiscussionListItem-author-avatar {
   display: block;
+
+  + .tooltip {
+    width: max-content;
+  }
 }
 .DiscussionListItem-badges {
   margin-top: 10px;