Usability fixes for new room header (#11729)

* Usability fixes for new room header

* lintfix

* Apply padding to both heading and topic

* lintfix

* comment clarity

* Remove title attr

test/components/views/elements/__snapshots__/FacePile-test.tsx.snap

@@ -3,28 +3,24 @@
 exports[`<FacePile /> renders with a tooltip 1`] = `
 <DocumentFragment>
   <div
-    class="mx_FacePile"
+    class="mx_AccessibleButton mx_FacePile mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
     data-state="closed"
+    role="button"
+    tabindex="0"
   >
     <div
-      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-      role="button"
-      tabindex="0"
+      class="_stacked-avatars_ylj7w_116"
     >
-      <div
-        class="_stacked-avatars_ylj7w_116"
+      <span
+        class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+        data-color="8"
+        data-testid="avatar-img"
+        data-type="round"
+        role="presentation"
+        style="--cpd-avatar-size: 36px;"
       >
-        <span
-          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
-          data-color="8"
-          data-testid="avatar-img"
-          data-type="round"
-          role="presentation"
-          style="--cpd-avatar-size: 36px;"
-        >
-          4
-        </span>
-      </div>
+        4
+      </span>
     </div>
   </div>
 </DocumentFragment>

test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap

@@ -3,28 +3,24 @@
 exports[`<RoomFacePile /> renders 1`] = `
 <DocumentFragment>
   <div
-    class="mx_FacePile"
+    class="mx_AccessibleButton mx_FacePile mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
     data-state="closed"
+    role="button"
+    tabindex="0"
   >
     <div
-      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
-      role="button"
-      tabindex="0"
+      class="_stacked-avatars_ylj7w_116"
     >
-      <div
-        class="_stacked-avatars_ylj7w_116"
+      <span
+        class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+        data-color="8"
+        data-testid="avatar-img"
+        data-type="round"
+        role="presentation"
+        style="--cpd-avatar-size: 28px;"
       >
-        <span
-          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
-          data-color="8"
-          data-testid="avatar-img"
-          data-type="round"
-          role="presentation"
-          style="--cpd-avatar-size: 28px;"
-        >
-          b
-        </span>
-      </div>
+        b
+      </span>
     </div>
   </div>
 </DocumentFragment>

test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap

@@ -25,9 +25,12 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
         class="_font-body-lg-semibold_1jx6b_83 mx_RoomHeader_heading"
         dir="auto"
         role="heading"
-        title="!1:example.org"
       >
-        !1:example.org
+        <span
+          class="mx_RoomHeader_truncated"
+        >
+          !1:example.org
+        </span>
       </div>
     </div>
     <nav