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

res/css/views/rooms/_RoomHeader.pcss

@@ -19,11 +19,29 @@ limitations under the License.
     padding: 0 var(--cpd-space-3x);
     border-bottom: 1px solid $separator;
     background-color: $background;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.mx_RoomHeader:hover {
+    background-color: $header-panel-bg-hover;
 }
 
 .mx_RoomHeader_info {
-    cursor: pointer;
     flex: 1;
+    /* We want the spacing to be 64px, 13x = 52px but we have a flex gap of
+       12px set on the flex container, which sums up to 64 */
+    padding-right: var(--cpd-space-13x);
+}
+
+.mx_RoomHeader_truncated {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    overflow: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
 }
 
 .mx_RoomHeader_heading {
@@ -35,14 +53,6 @@ limitations under the License.
 .mx_RoomHeader_topic {
     height: 0;
     opacity: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    overflow: hidden;
-    word-break: break-all;
-    text-overflow: ellipsis;
-
     transition: all var(--transition-standard) ease 0.1s;
 }
 
@@ -51,10 +61,19 @@ limitations under the License.
         value in pixels */
     height: calc($font-13px * 1.5);
     opacity: 1;
+
+    a:hover {
+        text-decoration: underline;
+    }
+}
+
+.mx_RoomHeader_icon {
+    flex-shrink: 0;
 }
 
 .mx_RoomHeader .mx_FacePile {
     color: $secondary-content;
+    background: $background;
     display: flex;
     align-items: center;
     gap: var(--cpd-space-2x);

res/themes/dark/css/_dark.pcss

@@ -54,6 +54,7 @@ $accent-1400: var(--cpd-color-green-1400);
 /* ******************** */
 $inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
 $header-panel-bg-color: var(--cpd-color-bg-subtle-secondary);
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 /* ******************** */
 
 /* Theme specific colors */

res/themes/legacy-dark/css/_legacy-dark.pcss

@@ -8,6 +8,7 @@ $bg-color: #181b21;
 $base-color: #15171b;
 $base-text-color: #edf3ff;
 $header-panel-bg-color: #22262e;
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 $header-panel-text-primary-color: #a1b2d1;
 $header-panel-text-secondary-color: #c8c8cd;
 $text-primary-color: #edf3ff;

res/themes/legacy-light/css/_legacy-light.pcss

@@ -16,6 +16,7 @@ $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI
 /* unified palette */
 /* try to use these colors when possible */
 $header-panel-bg-color: #f3f8fd;
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 
 /* typical text (dark-on-white in light skin) */
 $primary-fg-color: #2e2f32;

res/themes/light-custom/css/_custom.pcss

@@ -57,6 +57,7 @@ $dialog-backdrop-color: var(--sidebar-color-50pct);
 
 /* --roomlist-background-color */
 $header-panel-bg-color: var(--roomlist-background-color);
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
 /* these were #f2f5f8 instead of #f3f8fd, but close enough */
 $dark-panel-bg-color: var(--roomlist-background-color);

res/themes/light/css/_light.pcss

@@ -75,6 +75,7 @@ $accent-1400: var(--cpd-color-green-1400);
 /* ******************** */
 $inverted-bg-color: var(--cpd-color-bg-action-primary-rest);
 $header-panel-bg-color: var(--cpd-color-bg-subtle-primary);
+$header-panel-bg-hover: var(--cpd-color-gray-200);
 /* ******************** */
 
 /* Theme specific colors */

src/components/views/elements/FacePile.tsx

@@ -65,12 +65,10 @@ const FacePile: FC<IProps> = ({
     );
 
     const content = (
-        <div className="mx_FacePile">
+        <AccessibleButton className="mx_FacePile" kind="link_inline" onClick={props.onClick ?? null}>
-            <AccessibleButton kind="link_inline" onClick={props.onClick ?? null}>
+            <AvatarStack>{pileContents}</AvatarStack>
-                <AvatarStack>{pileContents}</AvatarStack>
+            {children}
-                {children}
+        </AccessibleButton>
-            </AccessibleButton>
-        </div>
     );
 
     return tooltipLabel ? (

src/components/views/rooms/RoomHeader.tsx

@@ -123,48 +123,47 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                     size="lg"
                     weight="semibold"
                     dir="auto"
-                    title={roomName}
                     role="heading"
                     aria-level={1}
                     className="mx_RoomHeader_heading"
                 >
-                    {roomName}
+                    <span className="mx_RoomHeader_truncated">{roomName}</span>
 
                     {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
-                        <Tooltip label={_t("common|public_room")}>
+                        <Tooltip label={_t("common|public_room")} side="right">
                             <PublicIcon
                                 width="16px"
                                 height="16px"
-                                className="text-secondary"
+                                className="mx_RoomHeader_icon text-secondary"
                                 aria-label={_t("common|public_room")}
                             />
                         </Tooltip>
                     )}
 
                     {isDirectMessage && e2eStatus === E2EStatus.Verified && (
-                        <Tooltip label={_t("common|verified")}>
+                        <Tooltip label={_t("common|verified")} side="right">
                             <VerifiedIcon
                                 width="16px"
                                 height="16px"
-                                className="mx_Verified"
+                                className="mx_RoomHeader_icon mx_Verified"
                                 aria-label={_t("common|verified")}
                             />
                         </Tooltip>
                     )}
 
                     {isDirectMessage && e2eStatus === E2EStatus.Warning && (
-                        <Tooltip label={_t("room|header_untrusted_label")}>
+                        <Tooltip label={_t("room|header_untrusted_label")} side="right">
                             <ErrorIcon
                                 width="16px"
                                 height="16px"
-                                className="mx_Untrusted"
+                                className="mx_RoomHeader_icon mx_Untrusted"
                                 aria-label={_t("room|header_untrusted_label")}
                             />
                         </Tooltip>
                     )}
                 </BodyText>
                 {roomTopic && (
-                    <BodyText as="div" size="sm" className="mx_RoomHeader_topic">
+                    <BodyText as="div" size="sm" className="mx_RoomHeader_topic mx_RoomHeader_truncated">
                         <Linkify>{roomTopicBody}</Linkify>
                     </BodyText>
                 )}

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"
+      class="_stacked-avatars_ylj7w_116"
-      role="button"
-      tabindex="0"
     >
-      <div
+      <span
-        class="_stacked-avatars_ylj7w_116"
+        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
+        4
-          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+      </span>
-          data-color="8"
-          data-testid="avatar-img"
-          data-type="round"
-          role="presentation"
-          style="--cpd-avatar-size: 36px;"
-        >
-          4
-        </span>
-      </div>
     </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"
+      class="_stacked-avatars_ylj7w_116"
-      role="button"
-      tabindex="0"
     >
-      <div
+      <span
-        class="_stacked-avatars_ylj7w_116"
+        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
+        b
-          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+      </span>
-          data-color="8"
-          data-testid="avatar-img"
-          data-type="round"
-          role="presentation"
-          style="--cpd-avatar-size: 28px;"
-        >
-          b
-        </span>
-      </div>
     </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