Use flexboxes in AppTile/AppDrawer CSS for automatic resizing

Using flexboxes removes the need for pixel constants, and the app
content now resizes to fill the tiles.

Signed-off-by: Pauli Virtanen <pav@iki.fi>

res/css/views/rooms/_AppsDrawer.scss

@@ -16,17 +16,14 @@ limitations under the License.
 */
 
 /*
-the tile title bar is 5 (top border) + 12 (title, buttons) + 5 (bottom padding) px = 22px
+ Minimum size for usual AppTiles and fixed size for mini-tiles.
-the body is assumed to be 300px (assumed by at least the sticker pickerm, perhaps elsewhere),
-so the body height would be 300px - 22px (room for title bar) = 278px
-BUT! the sticker picker also assumes it's a little less high than that because the iframe
-for the sticker picker doesn't have any padding or margin on it's bottom.
-so subtracking another 5px, which brings us at 273px.
 */
-$AppsDrawerBodyHeight: 273px;
+$AppTileMinHeight: 300px;
+$MiniAppTileHeight: 114px;
 
 .mx_AppsDrawer {
     margin: 5px;
+    display: block;
 }
 
 .mx_AppsDrawer_hidden {
@@ -36,7 +33,7 @@ $AppsDrawerBodyHeight: 273px;
 .mx_AppsContainer {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: stretch;
     justify-content: center;
 }
 
@@ -44,7 +41,7 @@ $AppsDrawerBodyHeight: 273px;
     order: 2;
     cursor: pointer;
     padding: 0;
-    margin: 5px auto 5px auto;
+    margin: 5px auto 5px 0px;
     color: $accent-color;
     font-size: $font-12px;
 }
@@ -68,6 +65,9 @@ $AppsDrawerBodyHeight: 273px;
     margin-right: 5px;
     border: 5px solid $widget-menu-bar-bg-color;
     border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    min-height: $AppTileMinHeight;
 }
 
 .mx_AppTile:last-child {
@@ -77,27 +77,40 @@ $AppsDrawerBodyHeight: 273px;
 .mx_AppTileFullWidth {
     max-width: 960px;
     width: 100%;
-    height: 100%;
     margin: 0;
     padding: 0;
     border: 5px solid $widget-menu-bar-bg-color;
     border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    min-height: $AppTileMinHeight;
 }
 
 .mx_AppTile_mini {
     max-width: 960px;
     width: 100%;
-    height: 100%;
     margin: 0;
     padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: $MiniAppTileHeight;
 }
 
-.mx_AppTile_persistedWrapper {
+.mx_AppTile.mx_AppTile_minimised,
-    height: $AppsDrawerBodyHeight;
+.mx_AppTileFullWidth.mx_AppTile_minimised,
+.mx_AppTile_mini.mx_AppTile_minimised {
+    min-height: inherit;
 }
 
+.mx_AppTile .mx_AppTile_persistedWrapper,
+.mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
 .mx_AppTile_mini .mx_AppTile_persistedWrapper {
-    height: 114px;
+    flex: 1;
+}
+
+.mx_AppTile_persistedWrapper div {
+    width: 100%;
+    height: 100%;
 }
 
 .mx_AppTileMenuBar {
@@ -109,6 +122,7 @@ $AppsDrawerBodyHeight: 273px;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
+    width: 100%;
 }
 
 .mx_AppTileMenuBar_expanded {
@@ -171,7 +185,7 @@ $AppsDrawerBodyHeight: 273px;
 }
 
 .mx_AppTileBody {
-    height: $AppsDrawerBodyHeight;
+    height: 100%;
     width: 100%;
     overflow: hidden;
 }
@@ -182,6 +196,13 @@ $AppsDrawerBodyHeight: 273px;
     overflow: hidden;
 }
 
+.mx_AppTile .mx_AppTileBody,
+.mx_AppTileFullWidth .mx_AppTileBody,
+.mx_AppTile_mini .mx_AppTileBody_mini {
+    height: inherit;
+    flex: 1;
+}
+
 .mx_AppTileBody_mini iframe {
     border: none;
     width: 100%;
@@ -190,7 +211,7 @@ $AppsDrawerBodyHeight: 273px;
 
 .mx_AppTileBody iframe {
     width: 100%;
-    height: $AppsDrawerBodyHeight;
+    height: 100%;
     overflow: hidden;
     border: none;
     padding: 0;
@@ -330,7 +351,7 @@ form.mx_Custom_Widget_Form div {
     align-items: center;
     font-weight: bold;
     position: relative;
-    height: $AppsDrawerBodyHeight;
+    height: 100%;
 }
 
 .mx_AppLoading .mx_Spinner {

src/components/views/elements/AppTile.js

@@ -775,14 +775,16 @@ export default class AppTile extends React.Component {
         const showMinimiseButton = this.props.showMinimise && this.props.show;
         const showMaximiseButton = this.props.showMinimise && !this.props.show;
 
-        let appTileClass;
+        let appTileClasses;
         if (this.props.miniMode) {
-            appTileClass = 'mx_AppTile_mini';
+            appTileClasses = {mx_AppTile_mini: true};
         } else if (this.props.fullWidth) {
-            appTileClass = 'mx_AppTileFullWidth';
+            appTileClasses = {mx_AppTileFullWidth: true};
         } else {
-            appTileClass = 'mx_AppTile';
+            appTileClasses = {mx_AppTile: true};
         }
+        appTileClasses.mx_AppTile_minimised = !this.props.show;
+        appTileClasses = classNames(appTileClasses);
 
         const menuBarClasses = classNames({
             mx_AppTileMenuBar: true,
@@ -814,7 +816,7 @@ export default class AppTile extends React.Component {
         }
 
         return <React.Fragment>
-            <div className={appTileClass} id={this.props.app.id}>
+            <div className={appTileClasses} id={this.props.app.id}>
                 { this.props.showMenubar &&
                 <div ref={this._menu_bar} className={menuBarClasses} onClick={this.onClickMenuBar}>
                     <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>