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/_MemberInfo.pcss

@@ -1,111 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-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_MemberInfo {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow-y: auto;
-    margin-top: 8px;
-
-    h2 {
-        font-size: $font-18px;
-        font-weight: var(--cpd-font-weight-semibold);
-        margin: 16px 0 16px 15px;
-    }
-
-    .mx_RoomTile_titleContainer {
-        width: 154px;
-    }
-
-    .mx_RoomTile_badge {
-        display: none;
-    }
-
-    .mx_RoomTile_title {
-        width: 160px;
-    }
-
-    h3 {
-        text-transform: uppercase;
-        color: $input-darker-fg-color;
-        font-weight: bold;
-        font-size: $font-12px;
-        margin: 4px 0;
-    }
-}
-
-.mx_MemberInfo_name {
-    align-items: center;
-    display: flex;
-
-    > .mx_E2EIcon {
-        margin-right: 0;
-    }
-
-    h2 {
-        flex: 1;
-        overflow-x: auto;
-        max-height: 50px;
-    }
-}
-
-.mx_MemberInfo_cancel {
-    height: 16px;
-    width: 16px;
-    padding: 10px 0 10px 10px;
-    cursor: pointer;
-    mask-image: url("$(res)/img/minimise.svg");
-    mask-repeat: no-repeat;
-    mask-position: 16px center;
-    background-color: $header-panel-text-primary-color;
-}
-
-.mx_MemberInfo_container {
-    margin: 0 16px 16px 16px;
-
-    &.mx_MemberInfo_container--profile {
-        margin-bottom: 16px;
-        font-size: $font-15px;
-        position: relative;
-    }
-}
-
-.mx_MemberInfo_avatar {
-    background: $spacePanel-bg-color;
-    margin-bottom: 16px;
-
-    > img {
-        height: auto;
-        width: 100%;
-        max-height: 30vh;
-        object-fit: contain;
-        display: block;
-    }
-
-    .mx_BaseAvatar img {
-        cursor: zoom-in;
-    }
-}
-
-.mx_MemberInfo_field {
-    cursor: pointer;
-    font-size: $font-15px;
-    color: $primary-content;
-    margin-left: 8px;
-    margin-bottom: 16px;
-    line-height: $font-23px;
-}

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;
+        const scopeHeader = room ? <SpaceScopeHeader room={room} /> : undefined;
-        if (room?.isSpaceRoom()) {
-            scopeHeader = (
-                <div className="mx_RightPanel_scopeHeader">
-                    <RoomAvatar room={room} size="32px" />
-                    <RoomName room={room} />
-                </div>
-            );
-        }
 
         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>
+    );
+};

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Matrix.org Foundation C.I.C.
+Copyright 2019-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.
@@ -17,20 +17,22 @@ limitations under the License.
 import React from "react";
 import { MatrixEvent, Room, RoomStateEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button, Text } from "@vector-im/compound-web";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import Modal from "../../../Modal";
 import { isValid3pidInvite } from "../../../RoomInvite";
-import RoomAvatar from "../avatars/RoomAvatar";
-import RoomName from "../elements/RoomName";
-import ErrorDialog from "../dialogs/ErrorDialog";
-import AccessibleButton from "../elements/AccessibleButton";
 import { Action } from "../../../dispatcher/actions";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import BaseCard from "../right_panel/BaseCard";
+import { Flex } from "../../utils/Flex";
+import { SpaceScopeHeader } from "./SpaceScopeHeader";
 
 interface IProps {
     event: MatrixEvent;
+    onClose?: () => void;
 }
 
 interface IState {
@@ -120,42 +122,32 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
         let adminTools: JSX.Element | undefined;
         if (this.state.canKick && this.state.invited) {
             adminTools = (
-                <div className="mx_MemberInfo_container">
+                <Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
-                    <h3>{_t("user_info|admin_tools_section")}</h3>
+                    <Text as="span" role="heading" size="lg" weight="semibold">
-                    <AccessibleButton className="mx_MemberInfo_field" onClick={this.onKickClick}>
+                        {_t("user_info|admin_tools_section")}
+                    </Text>
+                    <Button size="sm" kind="destructive" className="mx_MemberInfo_field" onClick={this.onKickClick}>
                         {_t("user_info|revoke_invite")}
-                    </AccessibleButton>
+                    </Button>
-                </div>
+                </Flex>
             );
         }
 
-        let scopeHeader: JSX.Element | undefined;
+        const scopeHeader: JSX.Element | undefined = this.room ? <SpaceScopeHeader room={this.room} /> : undefined;
-        if (this.room?.isSpaceRoom()) {
-            scopeHeader = (
-                <div className="mx_RightPanel_scopeHeader">
-                    <RoomAvatar room={this.room} size="32px" />
-                    <RoomName room={this.room} />
-                </div>
-            );
-        }
 
-        // We shamelessly rip off the MemberInfo styles here.
         return (
-            <div className="mx_MemberInfo" role="tabpanel">
+            <BaseCard header={scopeHeader} onClose={this.props.onClose}>
-                {scopeHeader}
+                <Flex className="mx_ThirdPartyMemberInfo" direction="column" gap="var(--cpd-space-4x)">
-                <div className="mx_MemberInfo_name">
+                    <Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
-                    <AccessibleButton
+                        {/* same as userinfo name style */}
-                        className="mx_MemberInfo_cancel"
+                        <Text as="span" role="heading" size="lg" weight="semibold">
-                        onClick={this.onCancel}
+                            {this.state.displayName}
-                        title={_t("action|close")}
+                        </Text>
-                    />
+                        <Text as="span">{_t("user_info|invited_by", { sender: this.state.senderName })}</Text>
-                    <h2>{this.state.displayName}</h2>
+                    </Flex>
-                </div>
-                <div className="mx_MemberInfo_container mx_MemberInfo_container--profile">
-                    {_t("user_info|invited_by", { sender: this.state.senderName })}
-                </div>
                     {adminTools}
-            </div>
+                </Flex>
+            </BaseCard>
         );
     }
 }

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -86,9 +86,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
       />
       <div
         class="mx_BaseCard_headerProp"
-      >
+      />
-        <span />
-      </div>
     </div>
     <div
       class="mx_AutoHideScrollbar"

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

@@ -3,26 +3,40 @@
 exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
 <div>
   <div
-    class="mx_MemberInfo"
+    class="mx_BaseCard"
-    role="tabpanel"
   >
     <div
-      class="mx_MemberInfo_name"
+      class="mx_BaseCard_header"
     >
       <div
-        class="mx_AccessibleButton mx_MemberInfo_cancel"
+        class="mx_BaseCard_headerProp"
-        role="button"
-        tabindex="0"
-        title="Close"
       />
-      <h2>
-        bob@bob.com
-      </h2>
     </div>
     <div
-      class="mx_MemberInfo_container mx_MemberInfo_container--profile"
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
+      <div
+        class="mx_Flex mx_ThirdPartyMemberInfo"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+      >
+        <section
+          class="mx_Flex"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+        >
+          <span
+            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
+            role="heading"
+          >
+            bob@bob.com
+          </span>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
           >
             Invited by Alice DisplayName
+          </span>
+        </section>
+      </div>
     </div>
   </div>
 </div>
@@ -31,26 +45,40 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
 exports[`<ThirdPartyMemberInfo /> should render invite when room in not available 1`] = `
 <div>
   <div
-    class="mx_MemberInfo"
+    class="mx_BaseCard"
-    role="tabpanel"
   >
     <div
-      class="mx_MemberInfo_name"
+      class="mx_BaseCard_header"
     >
       <div
-        class="mx_AccessibleButton mx_MemberInfo_cancel"
+        class="mx_BaseCard_headerProp"
-        role="button"
-        tabindex="0"
-        title="Close"
       />
-      <h2>
-        bob@bob.com
-      </h2>
     </div>
     <div
-      class="mx_MemberInfo_container mx_MemberInfo_container--profile"
+      class="mx_AutoHideScrollbar"
+      tabindex="-1"
+    >
+      <div
+        class="mx_Flex mx_ThirdPartyMemberInfo"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+      >
+        <section
+          class="mx_Flex"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+        >
+          <span
+            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
+            role="heading"
+          >
+            bob@bob.com
+          </span>
+          <span
+            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
           >
             Invited by Alice DisplayName
+          </span>
+        </section>
+      </div>
     </div>
   </div>
 </div>