add styles for compact layout

Signed-off-by: Hubert Chathi <hubert@uhoreg.ca>

src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss

@@ -175,3 +175,22 @@ limitations under the License.
     margin-top: -2px;
 }
 
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomStatusBar {
+        min-height: 40px;
+    }
+
+    .mx_RoomStatusBar_indicator {
+        margin-top: 10px;
+    }
+
+    .mx_RoomStatusBar_callBar {
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .mx_RoomStatusBar_typingBar {
+      height: 40px;
+      line-height: 40px;
+    }
+}

src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss

@@ -260,4 +260,14 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_ongoingConfCallNotification a {
     color: $accent-fg-color ! important;
-}
+}
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_RoomView_MessageList {
+        margin-bottom: 4px;
+    }
+
+    .mx_RoomView_statusAreaBox {
+        min-height: 42px;
+    }
+}