From 5adcd673ab342e21d90c14070de33d6b599bcafd Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jul 2018 15:08:17 +0100
Subject: [PATCH 1/2] Fix persisent apps being the wrong size

---
 res/css/structures/_LeftPanel.scss       |  2 +-
 res/css/views/rooms/_AppsDrawer.scss     | 28 +++++++++++++++++++-----
 src/components/views/elements/AppTile.js | 11 +++++++++-
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index bedec0e363..17e9cac1e4 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -54,7 +54,7 @@ limitations under the License.
 
 }
 
-.mx_LeftPanel .mx_AppTileFullWidth  {
+.mx_LeftPanel .mx_AppTileMini {
     height: 132px;
 }
 
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index bf5df4fbaa..e7f5697b27 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/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_AppTileMini {
+    max-width: 960px;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.mx_AppTile_persistedWrapper {
+    height: 280px;
+}
+
+.mx_AppTileMini .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;
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 8983f039e7..100276f933 100644
--- a/src/components/views/elements/AppTile.js
+++ b/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_AppTileMini';
+        } 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)}}>

From 4f8ece53b2eb544ab54206a581cff6356fac570e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jul 2018 15:58:07 +0100
Subject: [PATCH 2/2] Fix CSS naming

---
 res/css/structures/_LeftPanel.scss       | 3 ++-
 res/css/views/rooms/_AppsDrawer.scss     | 4 ++--
 src/components/views/elements/AppTile.js | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 17e9cac1e4..7cf6dd1119 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/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_AppTileMini {
+.mx_LeftPanel .mx_AppTile_mini {
     height: 132px;
 }
 
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index e7f5697b27..4a46063376 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -75,7 +75,7 @@ limitations under the License.
     border-radius: 2px;
 }
 
-.mx_AppTileMini {
+.mx_AppTile_mini {
     max-width: 960px;
     width: 100%;
     height: 100%;
@@ -87,7 +87,7 @@ limitations under the License.
     height: 280px;
 }
 
-.mx_AppTileMini .mx_AppTile_persistedWrapper {
+.mx_AppTile_mini .mx_AppTile_persistedWrapper {
     height: 114px;
 }
 
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 100276f933..534a490a32 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -618,7 +618,7 @@ export default class AppTile extends React.Component {
 
         let appTileClass;
         if (this.props.miniMode) {
-            appTileClass = 'mx_AppTileMini';
+            appTileClass = 'mx_AppTile_mini';
         } else if (this.props.fullWidth) {
             appTileClass = 'mx_AppTileFullWidth';
         } else {