From 039a40f14ee86d1344d78bb05ac9e488735c8b0b Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 12 Mar 2022 12:13:53 +0000
Subject: [PATCH] Fix buttons alignment of Space list header

Closes https://github.com/vector-im/element-web/issues/21401

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_SpaceHierarchy.scss      | 28 +++++++++++---------
 src/components/structures/SpaceHierarchy.tsx |  8 +++---
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/res/css/structures/_SpaceHierarchy.scss b/res/css/structures/_SpaceHierarchy.scss
index a43e538b721..85b9455a745 100644
--- a/res/css/structures/_SpaceHierarchy.scss
+++ b/res/css/structures/_SpaceHierarchy.scss
@@ -35,25 +35,33 @@ limitations under the License.
     }
 
     .mx_SpaceHierarchy_listHeader {
-        display: flex;
-        min-height: 32px;
+        display: grid;
+        justify-content: space-between;
         align-items: center;
+        column-gap: 10px;
+        min-height: 32px;
         font-size: $font-15px;
         line-height: $font-24px;
         color: $primary-content;
         margin-bottom: 12px;
 
-        > h4 {
+        .mx_SpaceHierarchy_listHeader_header {
+            grid-column-start: 1;
             font-weight: $font-semi-bold;
             margin: 0;
         }
 
-        .mx_AccessibleButton {
-            padding: 4px 12px;
-            font-weight: normal;
+        .mx_SpaceHierarchy_listHeader_buttons {
+            grid-column-start: 2;
+            display: flex;
+            flex-flow: wrap;
+            justify-content: flex-end;
+            row-gap: 12px;
+            column-gap: 12px;
 
-            & + .mx_AccessibleButton {
-                margin-left: 16px;
+            .mx_AccessibleButton {
+                padding: 4px 12px;
+                font-weight: normal;
             }
         }
 
@@ -61,10 +69,6 @@ limitations under the License.
         .mx_AccessibleButton_kind_primary_outline {
             padding: 3px 12px; // to account for the 1px border
         }
-
-        > span {
-            margin-left: auto;
-        }
     }
 
     .mx_SpaceHierarchy_error {
diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index 65da850e8e1..0c6ce4cee5e 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -770,8 +770,10 @@ const SpaceHierarchy = ({
 
                 content = <>
                     <div className="mx_SpaceHierarchy_listHeader">
-                        <h4>{ query.trim() ? _t("Results") : _t("Rooms and spaces") }</h4>
-                        <span>
+                        <h4 className="mx_SpaceHierarchy_listHeader_header">
+                            { query.trim() ? _t("Results") : _t("Rooms and spaces") }
+                        </h4>
+                        <div className="mx_SpaceHierarchy_listHeader_buttons">
                             { additionalButtons }
                             { hasPermissions && (
                                 <ManageButtons
@@ -781,7 +783,7 @@ const SpaceHierarchy = ({
                                     setError={setError}
                                 />
                             ) }
-                        </span>
+                        </div>
                     </div>
                     { errorText && <div className="mx_SpaceHierarchy_error">
                         { errorText }