From ee5d0d68421f0510d8a084f77954a9869e9e67a4 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 24 Mar 2021 17:05:21 +0000
Subject: [PATCH] Fix alignment bug with space panel on spaces with subspaces
 in Chrome

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

diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
index ffe67ce6ab..33f4dc0588 100644
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@@ -146,9 +146,6 @@ $activeBorderColor: $secondary-fg-color;
 
         .mx_SpaceButton_toggleCollapse {
             width: $gutterSize;
-            // negative margin to place it correctly even with the complex
-            // 4px selection border each space button has when active
-            margin-right: -4px;
             height: 20px;
             mask-position: center;
             mask-size: 20px;
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 1b86bb7898..1da6720eea 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -37,7 +37,7 @@ import {
     showSpaceSettings,
 } from "../../../utils/space";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import {ButtonEvent} from "../elements/AccessibleButton";
+import AccessibleButton, {ButtonEvent} from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import Modal from "../../../Modal";
 import SpacePublicShare from "./SpacePublicShare";
@@ -353,7 +353,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         const avatarSize = isNested ? 24 : 32;
 
         const toggleCollapseButton = childSpaces && childSpaces.length ?
-            <button
+            <AccessibleButton
                 className="mx_SpaceButton_toggleCollapse"
                 onClick={evt => this.toggleCollapse(evt)}
             /> : null;