From 5d41db59514c48c3f8f2442de442b4389ff85295 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Fredrik=20Ki=C3=A6r?=
 <31612826+anders-kiaer@users.noreply.github.com>
Date: Sun, 26 Apr 2020 22:45:44 +0200
Subject: [PATCH] Add max-width to flexbox and move from Python to CSS logic
 (#57)

---
 src/lib/flexbox.css               | 12 +++++++++++
 src/lib/index.js                  |  2 ++
 webviz_core_components/flexbox.py | 34 ++++++-------------------------
 3 files changed, 20 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/flexbox.css

diff --git a/src/lib/flexbox.css b/src/lib/flexbox.css
new file mode 100644
index 00000000..22c66455
--- /dev/null
+++ b/src/lib/flexbox.css
@@ -0,0 +1,12 @@
+div.webviz-core-components-flexbox {
+    display: flex; 
+    flex-wrap: wrap;
+    max-width: 90vw;
+}
+
+/* Select direct children of a flexbox instance,
+   and set e.g. default min-width on them */
+div.webviz-core-components-flexbox > * {
+    flex: auto;
+    min-width: 300px;
+} 
diff --git a/src/lib/index.js b/src/lib/index.js
index 48b5b943..1ff1bbb4 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -2,4 +2,6 @@
 import WebvizPluginPlaceholder from "./components/WebvizPluginPlaceholder.react";
 import ColorScales from "./components/ColorScales.react";
 
+import "./flexbox.css"
+
 export { WebvizPluginPlaceholder, ColorScales };
diff --git a/webviz_core_components/flexbox.py b/webviz_core_components/flexbox.py
index 3c70bdca..a651da5c 100644
--- a/webviz_core_components/flexbox.py
+++ b/webviz_core_components/flexbox.py
@@ -7,39 +7,17 @@
 
 class FlexBox(html.Div):
     """Behaves like Div from dash_html_components, but extends that container with
-    flexbox style settings. It also adds necessary flex CSS settings to its children.
-
-    Other style settings are untouched.
+    flexbox style settings. It also adds min-width CSS style to direct children.
     """
 
     def __init__(self, *args, **kwargs):
-        def container_style(old_style):
-            style = {} if old_style is None else copy.deepcopy(old_style)
-            style.update({"display": "flex", "flexWrap": "wrap"})
-            return style
-
-        def update_children_style(children):
-            if children is not None:
-                for child in children:
-                    style = (
-                        copy.deepcopy(child.style) if hasattr(child, "style") else {}
-                    )
-
-                    style["flex"] = style.get("flex", "auto")
-
-                    if "min-width" not in style and "minWidth" not in style:
-                        style["minWidth"] = "250px"
-
-                    child.style = style
-
-            return children
-
-        args, kwargs = argument_modifier(
-            html.Div, "style", container_style, args, kwargs
-        )
+        def add_flexbox_css_class(className):
+            return (
+                "" if className is None else className + " "
+            ) + "webviz-core-components-flexbox"
 
         args, kwargs = argument_modifier(
-            html.Div, "children", update_children_style, args, kwargs
+            html.Div, "className", add_flexbox_css_class, args, kwargs
         )
 
         super().__init__(*args, **kwargs)