fixed docking view layout when headerBar is expanded to not leave a gap.

2 files changed, 8 insertions, 13 deletions

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 15cd2c144..001c91b40 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -20,6 +20,8 @@
     position: relative;
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
 // add nodes menu. Note that the + button is actually an input label, not an actual button.
@@ -148,7 +150,8 @@
     }
 }
 
-.mainView-innerContent, .mainView-innerContent-Dark {
+.mainView-innerContent,
+.mainView-innerContent-Dark {
     display: contents;
     flex-direction: row;
     position: relative;
@@ -181,8 +184,8 @@
 .mainView-libraryHandle {
     background-color: $light-gray;
 }
-.mainView-innerContent-Dark 
-{
+
+.mainView-innerContent-Dark {
     .propertiesView {
         background-color: #252525;
 
@@ -208,6 +211,7 @@
         background: #353535;
     }
 }
+
 .mainView-container-Dark {
     .contextMenu-cont {
         background: $medium-gray;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9c9b19122..cdf85c905 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -286,7 +286,7 @@ export class MainView extends React.Component {
     headerBarScreenXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.headerBarDocHeight(), 1);
 
     @computed get headerBarDocView() {
-        return <div style={{ height: this.headerBarDocHeight() }}>
+        return <div className="mainView-headerBar" style={{ height: this.headerBarDocHeight() }}>
             <DocumentView key="headerBarDoc"
                 Document={this.headerBarDoc}
                 DataDoc={undefined}
@@ -502,15 +502,6 @@ export class MainView extends React.Component {
         </>;
     }
 
-    @computed get headerBar() {
-        return !this.userDoc ? (null) :
-            <div className="mainView-dashboardArea" style={{
-                height: this.headerBarDocHeight(),
-                width: "100%",
-            }} >
-                {this.headerBarDocView}
-            </div>;
-    }
 
     @computed get mainDashboardArea() {
         return !this.userDoc ? (null) :