Rebuild alignment of the menu buttons and notification badges

res/css/structures/_SpacePanel.scss

@@ -62,21 +62,26 @@ $activeBorderColor: $secondary-fg-color;
     }
 
     .mx_AutoHideScrollbar {
-        padding: 16px 12px 16px 0;
+        padding: 16px 0;
     }
 
     .mx_SpaceButton_toggleCollapse {
         cursor: pointer;
     }
 
-    .mx_SpaceItem.collapsed {
+    .mx_SpaceTreeLevel {
-        .mx_SpaceButton {
+        display: flex;
-            .mx_NotificationBadge {
+        flex-direction: column;
-                right: -4px;
+        max-width: 250px;
-                top: -4px;
+        flex-grow: 1;
-            }
+    }
-        }
 
+    .mx_SpaceItem {
+        display: inline-flex;
+        flex-flow: wrap;
+    }
+
+    .mx_SpaceItem.collapsed {
         & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
             transform: rotate(-90deg);
         }
@@ -88,15 +93,16 @@ $activeBorderColor: $secondary-fg-color;
 
     .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
         margin-left: $gutterSize;
+        min-width: 40px;
     }
 
     .mx_SpaceButton {
         border-radius: 8px;
-        position: relative;
         margin-bottom: 2px;
         display: flex;
         align-items: center;
-        padding: 4px;
+        padding: 4px 4px 4px 0;
+        width: 100%;
 
         &.mx_SpaceButton_active {
             &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
@@ -110,6 +116,7 @@ $activeBorderColor: $secondary-fg-color;
         }
 
         .mx_SpaceButton_selectionWrapper {
+            position: relative;
             display: flex;
             flex: 1;
             align-items: center;
@@ -117,12 +124,23 @@ $activeBorderColor: $secondary-fg-color;
             padding: 4px;
         }
 
+        &:not(.mx_SpaceButton_narrow) {
+            .mx_SpaceButton_selectionWrapper {
+                width: 100%;
+                padding-right: 16px;
+                overflow: hidden;
+            }
+        }
+
+        &.mx_SpaceButton_narrow {
+            margin-right: 10px;
+        }
+
         .mx_SpaceButton_name {
             flex: 1;
             margin-left: 8px;
             white-space: nowrap;
             display: block;
-            max-width: 150px;
             text-overflow: ellipsis;
             overflow: hidden;
             padding-right: 8px;
@@ -199,8 +217,9 @@ $activeBorderColor: $secondary-fg-color;
             height: 20px;
             margin-top: auto;
             margin-bottom: auto;
-            position: relative;
             display: none;
+            position: absolute;
+            right: 4px;
 
             &::before {
                 top: 2px;
@@ -219,9 +238,8 @@ $activeBorderColor: $secondary-fg-color;
     }
 
     .mx_SpacePanel_badgeContainer {
+        position: absolute;
         height: 16px;
-        // don't set width so that it takes no space when there is no badge to show
-        margin: auto 0; // vertically align
 
         // Create a flexbox to make aligning dot badges easier
         display: flex;
@@ -241,14 +259,25 @@ $activeBorderColor: $secondary-fg-color;
     &.collapsed {
         .mx_SpaceButton {
             .mx_SpacePanel_badgeContainer {
-                position: absolute;
+                right: -3px;
-                right: 0px;
+                top: -3px;
-                top: 2px;
+            }
+
+            &.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: -6px;
+                top: -6px;
             }
         }
     }
 
     &:not(.collapsed) {
+        .mx_SpacePanel_badgeContainer {
+            position: absolute;
+            right: 4px;
+        }
+
         .mx_SpaceButton:hover,
         .mx_SpaceButton:focus-within,
         .mx_SpaceButton_hasMenuOpen {