Fix buttons alignment of Space list header (#8047)

res/css/structures/_SpaceHierarchy.scss

@@ -35,25 +35,33 @@ limitations under the License.
     }
 
     .mx_SpaceHierarchy_listHeader {
-        display: flex;
+        display: grid;
-        min-height: 32px;
+        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_SpaceHierarchy_listHeader_buttons {
+            grid-column-start: 2;
+            display: flex;
+            flex-flow: wrap;
+            justify-content: flex-end;
+            row-gap: 12px;
+            column-gap: 12px;
+
             .mx_AccessibleButton {
                 padding: 4px 12px;
                 font-weight: normal;
-
-            & + .mx_AccessibleButton {
-                margin-left: 16px;
             }
         }
 
@@ -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 {

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>
+                        <h4 className="mx_SpaceHierarchy_listHeader_header">
-                        <span>
+                            { 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 }