the whole view is now composed from a single root widget

src/public/javascripts/widgets/flex_container.js

@@ -0,0 +1,29 @@
+import BasicWidget from "./basic_widget.js";
+
+export default class FlexContainer extends BasicWidget {
+    constructor(appContext, attrs, widgets) {
+        super(appContext);
+
+        this.attrs = attrs;
+        this.children = widgets;
+    }
+
+    render() {
+        this.$widget = $(`<div style="display: flex;">`);
+
+        for (const key in this.attrs) {
+            if (key === 'id') {
+                this.$widget.attr(key, this.attrs[key]);
+            }
+            else {
+                this.$widget.css(key, this.attrs[key]);
+            }
+        }
+
+        for (const widget of this.children) {
+            this.$widget.append(widget.render());
+        }
+
+        return this.$widget;
+    }
+}

src/public/javascripts/widgets/row_flex_container.js

@@ -1,19 +0,0 @@
-import BasicWidget from "./basic_widget.js";
-
-export default class RowFlexContainer extends BasicWidget {
-    constructor(appContext, widgets) {
-        super(appContext);
-
-        this.children = widgets;
-    }
-
-    render() {
-        this.$widget = $(`<div style="display: flex; flex-direction: row;">`);
-
-        for (const widget of this.children) {
-            this.$widget.append(widget.render());
-        }
-
-        return this.$widget;
-    }
-}

src/public/javascripts/widgets/side_pane_toggles.js

@@ -47,8 +47,6 @@ export default class SidePaneToggles extends BasicWidget {
         this.$widget.find(".show-left-pane-button").on('click', () => this.toggleAndSave('left', true));
         this.$widget.find(".hide-left-pane-button").on('click', () => this.toggleAndSave('left', false));
 
-        splitService.setupSplit(this.paneVisible.left, this.paneVisible.right);
-
         return this.$widget;
     }
 
@@ -69,4 +67,8 @@ export default class SidePaneToggles extends BasicWidget {
 
         this.trigger('sidebarVisibilityChanged', {side, show});
     }
+
+    initialRenderCompleteListener() {
+        splitService.setupSplit(this.paneVisible.left, this.paneVisible.right);
+    }
 }