Fix: Space scope header overflow (#11933)

* fix spacing for scope header

* extract scope header into component, apply line clamp

* update ThirdPartyMemberInfo styles

* pass onClose to ThirdPartyRoomMemberInfo

* rethemendex

* add View3pidInvite to actions enum, replace uses

* extract out action handler

* push card instead, test

* comment

* reinstate data-testid

* fix typo in styles

cypress/e2e/right-panel/right-panel.spec.ts

@@ -164,7 +164,7 @@ describe("RightPanel", () => {
                 cy.findByRole("button", { name: /\d member/ }).click();
             });
             cy.get(".mx_MemberList").should("have.length", 1);
-            cy.get(".mx_RightPanel_scopeHeader").within(() => {
+            cy.get(".mx_SpaceScopeHeader").within(() => {
                 cy.findByText(SPACE_NAME);
             });
 
@@ -173,7 +173,7 @@ describe("RightPanel", () => {
             cy.get(".mx_UserInfo_profile").within(() => {
                 cy.findByText(NAME);
             });
-            cy.get(".mx_RightPanel_scopeHeader").within(() => {
+            cy.get(".mx_SpaceScopeHeader").within(() => {
                 cy.findByText(SPACE_NAME);
             });
 

res/css/_components.pcss

@@ -285,7 +285,6 @@
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";
-@import "./views/rooms/_MemberInfo.pcss";
 @import "./views/rooms/_MemberList.pcss";
 @import "./views/rooms/_MessageComposer.pcss";
 @import "./views/rooms/_MessageComposerFormatBar.pcss";
@@ -310,7 +309,9 @@
 @import "./views/rooms/_RoomUpgradeWarningBar.pcss";
 @import "./views/rooms/_SearchBar.pcss";
 @import "./views/rooms/_SendMessageComposer.pcss";
+@import "./views/rooms/_SpaceScopeHeader.pcss";
 @import "./views/rooms/_Stickers.pcss";
+@import "./views/rooms/_ThirdPartyMemberInfo.pcss";
 @import "./views/rooms/_ThreadSummary.pcss";
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";

res/css/structures/_RightPanel.pcss

@@ -99,16 +99,3 @@ limitations under the License.
         mask-position: center;
     }
 }
-
-.mx_RightPanel_scopeHeader {
-    margin: 24px;
-    text-align: center;
-    font-weight: var(--cpd-font-weight-semibold);
-    font-size: $font-18px;
-    line-height: $font-22px;
-
-    .mx_BaseAvatar {
-        margin-right: 8px;
-        vertical-align: middle;
-    }
-}

res/css/views/rooms/_MemberList.pcss

@@ -42,12 +42,6 @@ limitations under the License.
     .mx_AutoHideScrollbar {
         flex: 1 1 0;
     }
-
-    .mx_RightPanel_scopeHeader {
-        /* vertically align with position on other right panel cards */
-        /* to prevent it bouncing as user navigates right panel */
-        margin-top: -8px;
-    }
 }
 
 .mx_MemberList_chevron {

res/css/views/rooms/_SpaceScopeHeader.pcss

@@ -0,0 +1,29 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SpaceScopeHeader {
+    text-align: center;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+
+    .mx_BaseAvatar {
+        margin-right: var(--cpd-space-2x);
+        vertical-align: middle;
+    }
+}

res/css/views/rooms/_ThirdPartyMemberInfo.pcss

@@ -0,0 +1,19 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ThirdPartyMemberInfo {
+    padding: var(--cpd-space-4x);
+}

src/components/structures/RightPanel.tsx

@@ -213,7 +213,9 @@ export default class RightPanel extends React.Component<Props, IState> {
             case RightPanelPhases.Room3pidMemberInfo:
             case RightPanelPhases.Space3pidMemberInfo:
                 if (!!cardState?.memberInfoEvent) {
-                    card = <ThirdPartyMemberInfo event={cardState.memberInfoEvent} key={roomId} />;
+                    card = (
+                        <ThirdPartyMemberInfo event={cardState.memberInfoEvent} key={roomId} onClose={this.onClose} />
+                    );
                 }
                 break;
 

src/components/views/right_panel/UserInfo.tsx

@@ -65,8 +65,6 @@ import ShareDialog from "../dialogs/ShareDialog";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";
-import RoomAvatar from "../avatars/RoomAvatar";
-import RoomName from "../elements/RoomName";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import ConfirmSpaceUserActionDialog from "../dialogs/ConfirmSpaceUserActionDialog";
@@ -83,6 +81,7 @@ import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-me
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { asyncSome } from "../../../utils/arrays";
 import UIStore from "../../../stores/UIStore";
+import { SpaceScopeHeader } from "../rooms/SpaceScopeHeader";
 
 export interface IDevice extends Device {
     ambiguous?: boolean;
@@ -1744,26 +1743,15 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
         }
     }
 
-    let scopeHeader;
-    if (room?.isSpaceRoom()) {
-        scopeHeader = (
-            <div data-testid="space-header" className="mx_RightPanel_scopeHeader">
-                <RoomAvatar room={room} size="32px" />
-                <RoomName room={room} />
-            </div>
-        );
-    }
-
     const header = (
         <>
-            {scopeHeader}
             <UserInfoHeader member={member} e2eStatus={e2eStatus} roomId={room?.roomId} />
         </>
     );
     return (
         <BaseCard
             className={classes.join(" ")}
-            header={<span />}
+            header={room ? <SpaceScopeHeader room={room} /> : undefined}
             onClose={onClose}
             closeLabel={closeLabel}
             cardState={cardState}

src/components/views/rooms/MemberList.tsx

@@ -40,8 +40,6 @@ import dis from "../../../dispatcher/dispatcher";
 import { isValid3pidInvite } from "../../../RoomInvite";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import BaseCard from "../right_panel/BaseCard";
-import RoomAvatar from "../avatars/RoomAvatar";
-import RoomName from "../elements/RoomName";
 import TruncatedList from "../elements/TruncatedList";
 import Spinner from "../elements/Spinner";
 import SearchBox from "../../structures/SearchBox";
@@ -56,6 +54,7 @@ import { SDKContext } from "../../../contexts/SDKContext";
 import { canInviteTo } from "../../../utils/room/canInviteTo";
 import { inviteToRoom } from "../../../utils/room/inviteToRoom";
 import { Action } from "../../../dispatcher/actions";
+import { SpaceScopeHeader } from "./SpaceScopeHeader";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -411,15 +410,7 @@ export default class MemberList extends React.Component<IProps, IState> {
             />
         );
 
-        let scopeHeader;
-        if (room?.isSpaceRoom()) {
-            scopeHeader = (
-                <div className="mx_RightPanel_scopeHeader">
-                    <RoomAvatar room={room} size="32px" />
-                    <RoomName room={room} />
-                </div>
-            );
-        }
+        const scopeHeader = room ? <SpaceScopeHeader room={room} /> : undefined;
 
         return (
             <BaseCard

src/components/views/rooms/SpaceScopeHeader.tsx

@@ -0,0 +1,49 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Room } from "matrix-js-sdk/src/matrix";
+import { Text } from "@vector-im/compound-web";
+
+import RoomAvatar from "../avatars/RoomAvatar";
+import { useRoomName } from "../../../hooks/useRoomName";
+
+/**
+ * Scope header used to decorate right panels that are scoped to a space.
+ * When room is not a space renders nothing.
+ * Otherwise renders room avatar and name.
+ */
+export const SpaceScopeHeader: React.FC<{ room: Room }> = ({ room }) => {
+    const roomName = useRoomName(room);
+
+    if (!room.isSpaceRoom()) {
+        return null;
+    }
+
+    return (
+        <Text
+            as="div"
+            size="lg"
+            weight="semibold"
+            className="mx_SpaceScopeHeader"
+            title={roomName}
+            data-testid="space-header"
+        >
+            <RoomAvatar room={room} size="32px" />
+            {roomName}
+        </Text>
+    );
+};