Fix the space panel getting bigger when gaining a scroll bar (#12267)

* Fix the space panel getting bigger when gaining a scroll bar

Just makes the scrollbar gutter stable and removes 8px of padding
to compensate, so it will make the bar slightly larger, but it will
no longer change size weirdly if you have too many spaces in too short
a window.

* Tweak margins to keep space panel the same size

* Try 1px more

* Try 1px more to the left

* Fix sizes and disable flex when in narrow mode

* Update screenshots

* Another screenshot

* Last screenshot hopefully

res/css/structures/_SpacePanel.pcss

@@ -18,7 +18,7 @@ limitations under the License.
     --activeBackground-color: $panel-actions;
     --activeBorder-color: $primary-content;
     --activeBorder-transparent-gap: 1px;
-    --gutterSize: 16px;
+    --gutterSize: 14px;
     --height-nested: 24px;
     --height-topLevel: 32px;
 
@@ -34,6 +34,10 @@ limitations under the License.
     display: flex;
     flex-direction: column;
 
+    &.collapsed {
+        width: 68px;
+    }
+
     .mx_SpacePanel_toggleCollapse {
         position: absolute;
         width: 18px;
@@ -149,6 +153,11 @@ limitations under the License.
             min-width: 0;
         }
 
+        &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
+            flex: initial;
+            width: 32px;
+        }
+
         .mx_SpaceButton_name {
             flex: 1;
             margin-left: 8px;
@@ -323,7 +332,8 @@ limitations under the License.
     /* root space buttons are bigger and not indented */
     & > .mx_AutoHideScrollbar {
         flex: 1;
-        padding: 0 8px 16px 0;
+        padding: 0 0 16px 0;
+        scrollbar-gutter: stable;
 
         & > .mx_SpaceButton {
             height: var(--height-topLevel);
@@ -380,7 +390,7 @@ limitations under the License.
     .mx_UserMenu {
         padding-bottom: 12px;
         border-bottom: 1px solid $separator;
-        margin: 12px 14px 4px 18px;
+        margin: 12px 14px 4px 16px;
         max-width: 226px;
     }
 }