diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss index f7d5c8fa60..c697b63de5 100644 --- a/res/css/views/elements/_Pill.pcss +++ b/res/css/views/elements/_Pill.pcss @@ -89,4 +89,10 @@ limitations under the License. height: 16px; width: 16px; } + + &.mx_SpacePill { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + padding-left: 4px; + } } diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index 5770145b78..e95d39364a 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -103,7 +103,7 @@ export const Pill: React.FC = ({ type: propType, url, inMessage, room const classes = classNames("mx_Pill", { mx_AtRoomPill: type === PillType.AtRoomMention, mx_RoomPill: type === PillType.RoomMention, - mx_SpacePill: type === "space", + mx_SpacePill: type === "space" || targetRoom?.isSpaceRoom(), mx_UserPill: type === PillType.UserMention, mx_UserPill_me: resourceId === MatrixClientPeg.safeGet().getUserId(), mx_EventPill: type === PillType.EventInOtherRoom || type === PillType.EventInSameRoom,