Move power label to right of name

The power label is shown to the right of the name, but hidden on hover.

Part of https://github.com/vector-im/riot-web/issues/11940

res/css/views/rooms/_EntityTile.scss

@@ -40,7 +40,7 @@ limitations under the License.
     content: "";
     position: absolute;
     top: calc(50% - 8px); // center
-    right: 10px;
+    right: -8px;
     mask: url('$(res)/img/member_chevron.png');
     mask-repeat: no-repeat;
     width: 16px;
@@ -85,6 +85,7 @@ limitations under the License.
 
 .mx_EntityTile_details {
     overflow: hidden;
+    flex: 1;
 }
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
@@ -121,3 +122,13 @@ limitations under the License.
     white-space: nowrap;
     text-overflow: clip;
 }
+
+.mx_EntityTile_power {
+    padding-inline-start: 6px;
+    font-size: 10px;
+    color: $notice-secondary-color;
+}
+
+.mx_EntityTile:hover .mx_EntityTile_power {
+    display: none;
+}

src/components/views/rooms/EntityTile.js

@@ -160,10 +160,11 @@ const EntityTile = createReactClass({
         let powerLabel;
         const powerStatus = this.props.powerStatus;
         if (powerStatus) {
-            powerLabel = {
-                [EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"),
+            const powerText = {
+                [EntityTile.POWER_STATUS_MODERATOR]: _t("Mod"),
                 [EntityTile.POWER_STATUS_ADMIN]: _t("Admin"),
             }[powerStatus];
+            powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
         }
 
         let e2eIcon;
@@ -183,10 +184,10 @@ const EntityTile = createReactClass({
                                   onClick={this.props.onClick}>
                     <div className="mx_EntityTile_avatar">
                         { av }
-                        { powerLabel }
                         { e2eIcon }
                     </div>
                     { nameEl }
+                    { powerLabel }
                     { inviteButton }
                 </AccessibleButton>
             </div>

src/i18n/strings/en_EN.json

@@ -909,6 +909,7 @@
     "Some sessions in this encrypted room are not trusted": "Some sessions in this encrypted room are not trusted",
     "All sessions in this encrypted room are trusted": "All sessions in this encrypted room are trusted",
     "Edit message": "Edit message",
+    "Mod": "Mod",
     "This event could not be displayed": "This event could not be displayed",
     "%(senderName)s sent an image": "%(senderName)s sent an image",
     "%(senderName)s sent a video": "%(senderName)s sent a video",