From d97681846b26cac53018a3b4abfbc5aee92338c9 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 12 Mar 2022 13:29:23 +0000
Subject: [PATCH 1/2] Fix the header of Space landing page

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

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_SpaceRoomView.scss      | 33 ++++++++++++---------
 res/css/views/spaces/_SpaceCreateMenu.scss  |  3 +-
 src/components/structures/SpaceRoomView.tsx |  6 ++--
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index 8fbd6fbb703..42fe00da181 100644
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/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 {
diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss
index 80c1c39da22..0f39c2db54c 100644
--- a/res/css/views/spaces/_SpaceCreateMenu.scss
+++ b/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;
     }
diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
index fec714ea46f..42e2d3adf23 100644
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/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) => {

From 43f71f536749b696fb6914bb540c30f3253b9646 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 14 Mar 2022 04:18:07 +0000
Subject: [PATCH 2/2] Copied the comment for future reference

See: https://github.com/matrix-org/matrix-react-sdk/blob/14807de5520d735c23e88bc484fb545ff3ab2fc3/src/components/views/spaces/SpaceCreateMenu.tsx#L105

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_SpaceRoomView.scss     | 2 ++
 res/css/views/spaces/_SpaceCreateMenu.scss | 1 +
 2 files changed, 3 insertions(+)

diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.scss
index 42fe00da181..b0166fa152f 100644
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@@ -152,6 +152,7 @@ $SpaceRoomViewInnerWidth: 428px;
             right: 24px;
             top: 32px;
         }
+
         // XXX remove this when spaces leaves Beta
         .mx_SpaceRoomView_preview_spaceBetaPrompt {
             font-weight: $font-semi-bold;
@@ -266,6 +267,7 @@ $SpaceRoomViewInnerWidth: 428px;
                 }
             }
 
+            // XXX: Temporary for the Spaces release only
             .mx_SpaceFeedbackPrompt {
                 padding: 7px; // 8px - 1px border
                 border: 1px solid rgba($primary-content, .1);
diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.scss
index 0f39c2db54c..9b5954aecfe 100644
--- a/res/css/views/spaces/_SpaceCreateMenu.scss
+++ b/res/css/views/spaces/_SpaceCreateMenu.scss
@@ -43,6 +43,7 @@ $spacePanelWidth: 68px;
                 color: $secondary-content;
             }
 
+            // XXX: Temporary for the Spaces release only
             .mx_SpaceFeedbackPrompt {
                 border-top: 1px solid $input-border-color;
                 padding-top: 12px;