Make rooms and spaces list responsive (#8088)

res/css/structures/_SpaceHierarchy.scss

@@ -91,12 +91,6 @@ limitations under the License.
         }
     }
 
-    .mx_SpaceHierarchy_list {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-
     .mx_SpaceHierarchy_roomCount {
         > h3 {
             display: inline;
@@ -154,33 +148,45 @@ limitations under the License.
         padding-left: 12px;
     }
 
+    .mx_SpaceHierarchy_list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li.mx_SpaceHierarchy_roomTileWrapper {
+            list-style: none;
+
             .mx_SpaceHierarchy_roomTile {
                 position: relative;
                 padding: 8px 16px;
                 border-radius: 8px;
                 box-sizing: border-box;
 
-        display: grid;
+                display: flex;
-        grid-template-columns: 20px auto max-content;
+                flex-wrap: wrap;
-        grid-column-gap: 8px;
+                gap: 6px 12px;
-        grid-row-gap: 6px;
-        align-items: center;
 
-        .mx_BaseAvatar {
+                .mx_SpaceHierarchy_roomTile_item {
+                    font-weight: $font-semi-bold;
+                    font-size: $font-15px;
+                    line-height: $font-18px;
+                    display: grid;
+                    grid-template-columns: 20px auto;
+                    gap: 6px 8px;
+                    align-items: center;
+                    flex: 1; // wrap action buttons
+
+                    .mx_SpaceHierarchy_roomTile_avatar {
                         grid-row: 1;
                         grid-column: 1;
                     }
 
                     .mx_SpaceHierarchy_roomTile_name {
-            font-weight: $font-semi-bold;
-            font-size: $font-15px;
-            line-height: $font-18px;
                         grid-row: 1;
                         grid-column: 2;
 
                         .mx_InfoTooltip,
                         .mx_SpaceHierarchy_roomTile_joined {
-                display: inline;
                             margin-left: 12px;
                             color: $tertiary-content;
                             font-size: $font-12px;
@@ -199,7 +205,12 @@ limitations under the License.
                             }
                         }
 
+                        .mx_InfoTooltip {
+                            display: inline-block;
+                        }
+
                         .mx_SpaceHierarchy_roomTile_joined {
+                            display: inline;
                             position: relative;
                             padding-left: 16px;
 
@@ -220,22 +231,24 @@ limitations under the License.
                     }
 
                     .mx_SpaceHierarchy_roomTile_info {
+                        grid-row: 2;
+                        grid-column: 2;
                         font-size: $font-14px;
+                        font-weight: initial;
                         line-height: $font-18px;
                         color: $secondary-content;
-            grid-row: 2;
-            grid-column: 2/3;
                         display: -webkit-box;
                         -webkit-box-orient: vertical;
                         -webkit-line-clamp: 2;
                         overflow: hidden;
                     }
+                }
 
                 .mx_SpaceHierarchy_actions {
-            text-align: right;
+                    display: flex;
-            margin-left: 20px;
+                    align-items: center;
-            grid-column: 3;
+                    column-gap: 12px;
-            grid-row: 1/3;
+                    margin-left: auto;
 
                     .mx_AccessibleButton {
                         line-height: $font-24px;
@@ -251,8 +264,11 @@ limitations under the License.
 
                     .mx_Checkbox {
                         display: inline-flex;
-                vertical-align: middle;
+
-                margin-left: 12px;
+                        label {
+                            width: 16px;
+                            height: 16px;
+                        }
                     }
                 }
 
@@ -264,14 +280,14 @@ limitations under the License.
                     }
                 }
 
-        &.mx_SpaceHierarchy_joining .mx_AccessibleButton {
+                &.mx_SpaceHierarchy_joining {
+                    .mx_AccessibleButton {
                         visibility: visible;
                         padding: 4px 18px;
                     }
                 }
-
+            }
-    li.mx_SpaceHierarchy_roomTileWrapper {
+        }
-        list-style: none;
     }
 
     .mx_SpaceHierarchy_roomTile,

src/components/structures/SpaceHierarchy.tsx

@@ -206,13 +206,15 @@ const Tile: React.FC<ITileProps> = ({
     }
 
     const content = <React.Fragment>
+        <div className="mx_SpaceHierarchy_roomTile_item">
+            <div className="mx_SpaceHierarchy_roomTile_avatar">
                 { avatar }
+            </div>
             <div className="mx_SpaceHierarchy_roomTile_name">
                 { name }
                 { joinedSection }
                 { suggestedSection }
             </div>
-
             <div
                 className="mx_SpaceHierarchy_roomTile_info"
                 ref={e => e && linkifyElement(e)}
@@ -225,6 +227,7 @@ const Tile: React.FC<ITileProps> = ({
             >
                 { description }
             </div>
+        </div>
         <div className="mx_SpaceHierarchy_actions">
             { button }
             { checkbox }