Merge pull request #2080 from matrix-org/dbkr/persistent_app_css_fixes

Fix persisent apps being the wrong size

res/css/structures/_LeftPanel.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -54,7 +55,7 @@ limitations under the License.
 
 }
 
-.mx_LeftPanel .mx_AppTileFullWidth  {
+.mx_LeftPanel .mx_AppTile_mini {
     height: 132px;
 }
 

res/css/views/rooms/_AppsDrawer.scss

@@ -61,10 +61,6 @@ limitations under the License.
     background-color: $dialog-background-bg-color;
 }
 
-.mx_AppTile_persistedWrapper {
-    height: 280px;
-}
-
 .mx_AppTile:last-child {
     margin-right: 1px;
 }
@@ -79,6 +75,22 @@ limitations under the License.
     border-radius: 2px;
 }
 
+.mx_AppTile_mini {
+    max-width: 960px;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.mx_AppTile_persistedWrapper {
+    height: 280px;
+}
+
+.mx_AppTile_mini .mx_AppTile_persistedWrapper {
+    height: 114px;
+}
+
 .mx_AppTileMenuBar {
     margin: 0;
     padding: 2px 10px;
@@ -131,11 +143,17 @@ limitations under the License.
 }
 
 .mx_AppTileBody_mini {
-    height: 132px;
+    height: 112px;
     width: 100%;
     overflow: hidden;
 }
 
+.mx_AppTileBody_mini iframe {
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+
 .mx_AppTileBody iframe {
     width: 100%;
     height: 280px;

src/components/views/elements/AppTile.js

@@ -616,8 +616,17 @@ export default class AppTile extends React.Component {
         const reloadWidgetIcon = 'img/button-refresh.svg';
         const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
 
+        let appTileClass;
+        if (this.props.miniMode) {
+            appTileClass = 'mx_AppTile_mini';
+        } else if (this.props.fullWidth) {
+            appTileClass = 'mx_AppTileFullWidth';
+        } else {
+            appTileClass = 'mx_AppTile';
+        }
+
         return (
-            <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
+            <div className={appTileClass} id={this.props.id}>
                 { this.props.showMenubar &&
                 <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
                     <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>