From d14ea1bd58f7ae53a496c5e3c4f0135250dfe4e6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 4 May 2021 14:01:10 +0100
Subject: [PATCH 1/3] Fix layout issue with expanded space panel

---
 res/css/structures/_SpacePanel.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 0c5833b176..8f277806cb 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -80,6 +80,7 @@ $activeBorderColor: $secondary-fg-color;
         display: inline-flex;
         flex-flow: wrap;
         align-self: baseline;
+        width: 100%;
     }
 
     .mx_SpaceItem.collapsed {

From 4489f8a6ead924f8124c2ee95f508f36d6e66c8e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 4 May 2021 14:01:26 +0100
Subject: [PATCH 2/3] Fix hover behaviour of space invites

---
 res/css/structures/_SpacePanel.scss            | 2 +-
 src/components/views/spaces/SpaceTreeLevel.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index 8f277806cb..dbb18d02fd 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -277,7 +277,7 @@ $activeBorderColor: $secondary-fg-color;
         .mx_SpaceButton:hover,
         .mx_SpaceButton:focus-within,
         .mx_SpaceButton_hasMenuOpen {
-            &:not(.mx_SpaceButton_home) {
+            &:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
                 // Hide the badge container on hover because it'll be a menu button
                 .mx_SpacePanel_badgeContainer {
                     width: 0;
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 6825d84013..9bdbced0b5 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -300,12 +300,15 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             "collapsed": collapsed,
             "hasSubSpaces": childSpaces && childSpaces.length,
         });
+
+        const isInvite = space.getMyMembership() === "invite";
         const classes = classNames("mx_SpaceButton", {
             mx_SpaceButton_active: isActive,
             mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
             mx_SpaceButton_narrow: isNarrow,
+            mx_SpaceButton_invite: isInvite,
         });
-        const notificationState = space.getMyMembership() === "invite"
+        const notificationState = isInvite
             ? StaticNotificationState.forSymbol("!", NotificationColor.Red)
             : SpaceStore.instance.getNotificationState(space.roomId);
 

From caa772348fd3d303d903ea7c1c05d1ebd8dd6f16 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 4 May 2021 14:14:06 +0100
Subject: [PATCH 3/3] Actually fix the layout bug without re-regressing the
 prior issue

---
 res/css/structures/_SpacePanel.scss            | 6 ++++--
 src/components/views/spaces/SpaceTreeLevel.tsx | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index dbb18d02fd..9264e82ea5 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -79,8 +79,10 @@ $activeBorderColor: $secondary-fg-color;
     .mx_SpaceItem {
         display: inline-flex;
         flex-flow: wrap;
-        align-self: baseline;
-        width: 100%;
+
+        &.mx_SpaceItem_narrow {
+            align-self: baseline;
+        }
     }
 
     .mx_SpaceItem.collapsed {
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 9bdbced0b5..e48e1d5dc2 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -297,6 +297,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         const isActive = activeSpaces.includes(space);
         const itemClasses = classNames({
             "mx_SpaceItem": true,
+            "mx_SpaceItem_narrow": isNarrow,
             "collapsed": collapsed,
             "hasSubSpaces": childSpaces && childSpaces.length,
         });