From 2a43a9e94ea748cfa641382d1f15b9e9107ecf9e Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Mon, 7 Sep 2020 15:59:03 +0300
Subject: [PATCH] Container: support flexbox directives.

---
 src/widgets/Container.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/widgets/Container.tsx b/src/widgets/Container.tsx
index f3d502c..a2c4ff7 100644
--- a/src/widgets/Container.tsx
+++ b/src/widgets/Container.tsx
@@ -6,12 +6,17 @@ import Paper from "@material-ui/core/Paper";
 
 import "./Container.css";
 
-export default (props: {style?: any, children: any}) => (
-  <div className="Container" style={props.style}>
-    <Paper elevation={3}>
-      <div className="Container-inner">
-        {props.children}
-      </div>
-    </Paper>
-  </div>
-);
+export default (props: {style?: React.CSSProperties, children: any}) => {
+  const display = props.style?.display;
+  const flexDirection = props.style?.flexDirection;
+
+  return (
+    <div className="Container" style={props.style}>
+      <Paper elevation={3} style={{ display, flexDirection, flexGrow: 1 }}>
+        <div className="Container-inner" style={{ display, flexDirection, flexGrow: 1 }}>
+          {props.children}
+        </div>
+      </Paper>
+    </div>
+  );
+};