From f868cd66994a2980b4205aef574dd620a665fb39 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 18 Jul 2018 11:52:57 +0100
Subject: [PATCH] Fix border around persisted widgets

The PersistedElement had zero height so the border ended up in the
wrong place. Add a wrapper to fix the height back.

Fixes https://github.com/vector-im/riot-web/issues/7030
Fixes https://github.com/vector-im/riot-web/issues/7029
---
 res/css/views/rooms/_AppsDrawer.scss     |  4 ++++
 src/components/views/elements/AppTile.js | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index 6431853672..bf5df4fbaa 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -61,6 +61,10 @@ limitations under the License.
     background-color: $dialog-background-bg-color;
 }
 
+.mx_AppTile_persistedWrapper {
+    height: 280px;
+}
+
 .mx_AppTile:last-child {
     margin-right: 1px;
 }
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index e287abd07a..5dbc307810 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -569,9 +569,13 @@ export default class AppTile extends React.Component {
                     // re-mounted later when we do.
                     if (this.props.whitelistCapabilities.includes('m.always_on_screen')) {
                         const PersistedElement = sdk.getComponent("elements.PersistedElement");
-                        appTileBody = <PersistedElement persistKey={this._persistKey}>
-                            {appTileBody}
-                        </PersistedElement>;
+                        // Also wrap the PersistedElement in a div to fix the height, otherwise
+                        // AppTile's border is in the wrong place
+                        appTileBody = <div className="mx_AppTile_persistedWrapper">
+                            <PersistedElement persistKey={this._persistKey}>
+                                {appTileBody}
+                            </PersistedElement>
+                        </div>;
                     }
                 }
             } else {