Simplify Space Panel notification badge layout (#6977)

res/css/structures/_SpacePanel.scss

@@ -227,7 +227,7 @@ $activeBorderColor: $secondary-content;
             height: 20px;
             margin-top: auto;
             margin-bottom: auto;
-            display: none;
+            visibility: hidden;
             position: relative;
 
             &::before {
@@ -246,67 +246,45 @@ $activeBorderColor: $secondary-content;
         }
     }
 
+    .mx_SpaceButton_avatarWrapper {
+        position: relative;
+    }
+
     .mx_SpacePanel_badgeContainer {
         // Create a flexbox to make aligning dot badges easier
         display: flex;
         align-items: center;
+        position: absolute;
+        right: -3px;
+        top: -3px;
 
         .mx_NotificationBadge {
             margin: 0 2px; // centering
+            background-clip: padding-box;
         }
 
         .mx_NotificationBadge_dot {
             // make the smaller dot occupy the same width for centering
-            margin: 0 7px;
+            margin: 0 -1px 0 0;
+            border: 3px solid $groupFilterPanel-bg-color;
+        }
+
+        .mx_NotificationBadge_2char,
+        .mx_NotificationBadge_3char {
+            margin: -5px -5px 0 0;
+            border: 2px solid $groupFilterPanel-bg-color;
         }
     }
 
-    &.collapsed {
-        .mx_SpaceButton {
-            .mx_SpacePanel_badgeContainer {
-                position: absolute;
-                right: 0;
-                top: 0;
-
-                .mx_NotificationBadge {
-                    background-clip: padding-box;
-                }
-
-                .mx_NotificationBadge_dot {
-                    margin: 0 -1px 0 0;
-                    border: 3px solid $groupFilterPanel-bg-color;
-                }
-
-                .mx_NotificationBadge_2char,
-                .mx_NotificationBadge_3char {
-                    margin: -5px -5px 0 0;
-                    border: 2px solid $groupFilterPanel-bg-color;
-                }
-            }
-
-            &.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
-                // when we draw the selection border we move the relative bounds of our parent
-                // so update our position within the bounds of the parent to maintain position overall
-                right: -3px;
-                top: -3px;
-            }
-        }
+    .mx_SpaceButton_narrow .mx_SpaceButton_menuButton {
+        display: none;
     }
 
-    &:not(.collapsed) {
-        .mx_SpaceButton:hover,
-        .mx_SpaceButton:focus-within,
-        .mx_SpaceButton_hasMenuOpen {
-            &:not(.mx_SpaceButton_invite) {
-                // Hide the badge container on hover because it'll be a menu button
-                .mx_SpacePanel_badgeContainer {
-                    display: none;
-                }
-
-                .mx_SpaceButton_menuButton {
-                    display: block;
-                }
-            }
+    .mx_SpaceButton:hover,
+    .mx_SpaceButton:focus-within,
+    .mx_SpaceButton_hasMenuOpen {
+        &:not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
+            visibility: visible;
         }
     }
 

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -125,9 +125,11 @@ export const SpaceButton: React.FC<IButtonProps> = ({
         >
             { children }
             <div className="mx_SpaceButton_selectionWrapper">
-                { avatar }
+                <div className="mx_SpaceButton_avatarWrapper">
+                    { avatar }
+                    { notifBadge }
+                </div>
                 { !isNarrow && <span className="mx_SpaceButton_name">{ label }</span> }
-                { notifBadge }
 
                 { ContextMenuComponent && <ContextMenuTooltipButton
                     className="mx_SpaceButton_menuButton"