Fix the header of Space landing page (#8048)

matrix-org · Mar 14, 2022 · 64e9cdd · 64e9cdd
1 parent ed6a371
commit 64e9cdd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git 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;
@@ -254,13 +255,27 @@ $SpaceRoomViewInnerWidth: 428px;
         flex-direction: column;
         min-width: 0;
 
-        > .mx_BaseAvatar {
-            width: 80px;
-        }
+        .mx_SpaceRoomView_landing_header {
+            display: flex;
+            justify-content: space-between;
 
-        > .mx_BaseAvatar_image,
-        > .mx_BaseAvatar > .mx_BaseAvatar_image {
-            border-radius: 12px;
+            .mx_BaseAvatar {
+                width: 80px;
+
+                .mx_BaseAvatar_image {
+                    border-radius: 12px;
+                }
+            }
+
+            // XXX: Temporary for the Spaces release only
+            .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 +375,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
@@ -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;
@@ -112,14 +113,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
@@ -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) => {