Fix the header of Space landing page

Closes element-hq/element-web#21402

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/structures/_SpaceRoomView.scss

@@ -254,13 +254,26 @@ $SpaceRoomViewInnerWidth: 428px;
         flex-direction: column;
         min-width: 0;
 
-        > .mx_BaseAvatar {
-            width: 80px;
-        }
+        .mx_SpaceRoomView_landing_header {
+            display: flex;
+            justify-content: space-between;
+
+            .mx_BaseAvatar {
+                width: 80px;
+
+                .mx_BaseAvatar_image {
+                    border-radius: 12px;
+                }
+            }
 
-        > .mx_BaseAvatar_image,
-        > .mx_BaseAvatar > .mx_BaseAvatar_image {
-            border-radius: 12px;
+            .mx_SpaceFeedbackPrompt {
+                padding: 7px; // 8px - 1px border
+                border: 1px solid rgba($primary-content, .1);
+                border-radius: 8px;
+                width: max-content;
+                height: fit-content;
+                margin-left: 24px;
+            }
         }
 
         .mx_SpaceRoomView_landing_name {
@@ -360,14 +373,6 @@ $SpaceRoomViewInnerWidth: 428px;
             margin: 0 0 20px;
             flex: 0;
         }
-
-        .mx_SpaceFeedbackPrompt {
-            padding: 7px; // 8px - 1px border
-            border: 1px solid rgba($primary-content, .1);
-            border-radius: 8px;
-            width: max-content;
-            margin: 0 0 -40px auto; // collapse its own height to not push other components down
-        }
     }
 
     .mx_SpaceRoomView_privateScope {

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -112,14 +112,13 @@ $spacePanelWidth: 68px;
         position: relative;
         font-size: inherit;
         line-height: inherit;
-        margin-right: auto;
+        margin-right: 8px;
     }
 
     .mx_AccessibleButton_kind_link {
         color: $accent;
         position: relative;
         padding: 0;
-        margin-left: 8px;
         font-size: inherit;
         line-height: inherit;
     }

src/components/structures/SpaceRoomView.tsx

@@ -479,8 +479,10 @@ const SpaceLanding = ({ space }: { space: Room }) => {
     };
 
     return <div className="mx_SpaceRoomView_landing">
-        <SpaceFeedbackPrompt />
-        <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
+        <div className="mx_SpaceRoomView_landing_header">
+            <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
+            <SpaceFeedbackPrompt />
+        </div>
         <div className="mx_SpaceRoomView_landing_name">
             <RoomName room={space}>
                 { (name) => {