wip CSS

src/application/base.css

@@ -3,10 +3,11 @@
 |
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-.jp-SideBar {
+.jp-SideBar.p-TabBar.jp-mod-right, .jp-SideBar.p-TabBar.jp-mod-left {
   margin: 0;
   padding: 0;
   display: flex;
   align-items: stretch;
   list-style-type: none;
+  max-height: none;
 }

src/application/shell.ts

@@ -68,7 +68,7 @@ interface ISideAreaOptions {
  * The application shell for JupyterLab.
  */
 export
-class ApplicationShell extends BoxPanel {
+class ApplicationShell extends Panel {
   /**
    * Construct a new application shell.
    */
@@ -76,8 +76,6 @@ class ApplicationShell extends BoxPanel {
     super();
     this.addClass(APPLICATION_SHELL_CLASS);
     this.id = 'main';
-    this.direction = 'top-to-bottom';
-    this.spacing = 0;
 
     let topPanel = this._topPanel = new Panel();
     let hboxPanel = this._hboxPanel = new BoxPanel();
@@ -122,13 +120,8 @@ class ApplicationShell extends BoxPanel {
     hboxPanel.addWidget(hsplitPanel);
     hboxPanel.addWidget(rightHandler.sideBar);
 
-    BoxPanel.setStretch(this, 1);
-    BoxPanel.setStretch(topPanel, 0);
-    BoxPanel.setStretch(hboxPanel, 1);
-
     this.addWidget(topPanel);
     this.addWidget(hboxPanel);
-    this.update();
   }
 
   /**

src/default-theme/index.css

@@ -29,10 +29,7 @@
 
 body {
   background: #E0E0E0;
-  display: flex;
-  flex-direction: column;
   font-family: sans-serif;
-  height: 100%;
   position: absolute;
   top: 0;
   left: 0;

src/default-theme/shell.css

@@ -4,23 +4,45 @@
 |----------------------------------------------------------------------------*/
 
 #main {
-  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
   font-size: 14px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+
+#jp-main-content-panel {
+  display: flex;
+  flex: 1 1 auto;
 }
 
 
 #jp-top-panel {
   display: flex;
+  flex: 0 0 auto;
   min-height: 24px;
 }
 
 
+#jp-main-split-panel {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+
 #jp-left-stack, #jp-right-stack {
+  display: flex;
   border-right: 1px solid #BDBDBD;
+  flex: 1 1 auto;
 }
 
 
 #jp-left-stack > .p-Widget, #jp-right-stack > .p-Widget {
+  flex: 1 1 auto;
   min-width: 300px;
 }
 
@@ -29,6 +51,7 @@
   background: white;
   color: #777777;
   font-size: 14px;
+  min-width: 36px;
   max-width: 36px;
   max-height: none;
   overflow: visible;

src/mainmenu/index.css

@@ -10,11 +10,8 @@
 #jp-top-panel.p-Widget.p-Panel {
    border-bottom: 1px solid #BDBDBD;
    background: white;
-   top: 0px;
-   left: 0px;
    min-height: 28px;
    max-height: 28px;
-   position: absolute;
 }
 
 .p-MenuBar .p-MenuBar-item {