diff --git a/framework/core/js/src/admin/components/SessionDropdown.tsx b/framework/core/js/src/admin/components/SessionDropdown.tsx
index c80999798..30b38f395 100644
--- a/framework/core/js/src/admin/components/SessionDropdown.tsx
+++ b/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>,
+    ];
   }
 
   /**
diff --git a/framework/core/js/src/common/components/SelectDropdown.tsx b/framework/core/js/src/common/components/SelectDropdown.tsx
index b9e9df1d4..08b16eb40 100644
--- a/framework/core/js/src/common/components/SelectDropdown.tsx
+++ b/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,
     ];
   }
diff --git a/framework/core/js/src/forum/components/HeaderDropdown.tsx b/framework/core/js/src/forum/components/HeaderDropdown.tsx
index a43ec1abc..4d1dd5af7 100644
--- a/framework/core/js/src/forum/components/HeaderDropdown.tsx
+++ b/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>,
     ];
   }
 
diff --git a/framework/core/js/src/forum/components/SessionDropdown.tsx b/framework/core/js/src/forum/components/SessionDropdown.tsx
index 0da69c2d8..1d265a38a 100644
--- a/framework/core/js/src/forum/components/SessionDropdown.tsx
+++ b/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>,
+    ];
   }
 
   /**
diff --git a/framework/core/less/common/App.less b/framework/core/less/common/App.less
index c93e743e6..1b0e1f296 100644
--- a/framework/core/less/common/App.less
+++ b/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 {
diff --git a/framework/core/less/forum/DiscussionListItem.less b/framework/core/less/forum/DiscussionListItem.less
index 143f51717..599b752ef 100644
--- a/framework/core/less/forum/DiscussionListItem.less
+++ b/framework/core/less/forum/DiscussionListItem.less
@@ -36,6 +36,10 @@
 }
 .DiscussionListItem-author-avatar {
   display: block;
+
+  + .tooltip {
+    width: max-content;
+  }
 }
 .DiscussionListItem-badges {
   margin-top: 10px;