title row spacing

src/public/javascripts/widgets/flex_container.js

@@ -12,6 +12,8 @@ export default class FlexContainer extends BasicWidget {
             style: `display: flex; flex-direction: ${direction};`,
         };
 
+        this.classes = [];
+
         this.children = [];
     }
 
@@ -20,6 +22,11 @@ export default class FlexContainer extends BasicWidget {
         return this;
     }
 
+    class(className) {
+        this.classes.push(className);
+        return this;
+    }
+
     css(name, value) {
         this.attrs.style += `${name}: ${value};`;
         return this;
@@ -46,6 +53,10 @@ export default class FlexContainer extends BasicWidget {
             this.$widget.attr(key, this.attrs[key]);
         }
 
+        for (const className of this.classes) {
+            this.$widget.addClass(className);
+        }
+
         for (const widget of this.children) {
             this.$widget.append(widget.render());
         }

src/public/javascripts/widgets/layout.js

@@ -42,7 +42,8 @@ export default class Layout {
                     .child(new NoteTreeWidget())
                 )
                 .child(new FlexContainer('column').id('center-pane')
-                    .child(new FlexContainer('row')
+                    .child(new FlexContainer('row').class('title-row')
+                        .cssBlock('.title-row > * { margin: 5px; }')
                         .child(new TabCachingWidget(() => new NotePathsWidget()))
                         .child(new NoteTitleWidget())
                         .child(new RunScriptButtonsWidget())

src/public/javascripts/widgets/standard_top_widget.js

@@ -66,7 +66,8 @@ export default class StandardTopWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
 
-        const historyNavigationWidget = new HistoryNavigationWidget(this);
+        const historyNavigationWidget = new HistoryNavigationWidget();
+        this.child(historyNavigationWidget);
 
         this.$widget.prepend(historyNavigationWidget.render());