fix issue main area missing issue, add mobx observer to TabLayout

Signed-off-by: Yangjun Wang <yangjun.wang@wartsila.com>

src/renderer/components/layout/main-layout.scss

@@ -1,14 +1,18 @@
-
 .MainLayout {
   --sidebar-max-size: 200px;
 
   display: grid;
-  grid-template-areas: "aside header" "aside main" "aside footer";
-  grid-template-rows: [header] var(--main-layout-header) [main] 1fr [footer] auto;
+  grid-template-areas:
+    "aside header"
+    "aside tabs"
+    "aside main"
+    "aside footer";
+  grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
   grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
+
   height: 100%;
 
-  header {
+  > header {
     grid-area: header;
     background: $layoutBackground;
     padding: $padding $padding * 2;
@@ -23,7 +27,7 @@
     }
   }
 
-  aside {
+  > aside {
     grid-area: aside;
     position: relative;
     background: $sidebarBackground;
@@ -43,15 +47,19 @@
       &.accessible:hover {
         width: var(--sidebar-max-size);
         transition-delay: 750ms;
-        box-shadow: 3px 3px 16px rgba(0, 0, 0, .35);
+        box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
         z-index: $zIndex-sidebar-hover;
       }
     }
   }
 
+  > main {
+    display: contents;
+  }
+
   footer {
     position: relative;
     grid-area: footer;
     min-width: 0; // restrict size when overflow content (e.g. <Dock> tabs scrolling)
   }
-}
+}

src/renderer/components/layout/main-layout.tsx

@@ -50,7 +50,9 @@ export class MainLayout extends React.Component<Props> {
           <Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} />
         </aside>
 
-        <ErrorBoundary>{children}</ErrorBoundary>
+        <main>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </main>
 
         <footer className={footerClass}>{footer === undefined ? <Dock /> : footer}</footer>
       </div>

src/renderer/components/layout/tab-layout.scss

@@ -1,9 +1,6 @@
 
 .TabLayout {
-  display: grid;
-  grid-template-areas: "tabs" "main";
-  grid-template-rows: [tabs] min-content [main] 1fr;
-  height: 100%;
+  display: contents;
 
   > .Tabs {
     grid-area: tabs;

src/renderer/components/layout/tab-layout.tsx

@@ -2,6 +2,7 @@ import "./tab-layout.scss";
 
 import React, { ReactNode } from "react";
 import { matchPath, RouteProps } from "react-router-dom";
+import { observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { Tab, Tabs } from "../tabs";
 import { ErrorBoundary } from "../error-boundary";
@@ -20,7 +21,7 @@ interface Props {
   contentClass?: string;
 }
 
-export const TabLayout = ({ className, contentClass, tabs, children }: Props) => {
+export const TabLayout = observer(({ className, contentClass, tabs, children }: Props) => {
   const routePath = navigation.location.pathname;
   const cluster = getHostedCluster();
   if (!cluster) {
@@ -41,4 +42,4 @@ export const TabLayout = ({ className, contentClass, tabs, children }: Props) =>
       </main>
     </div>
   );
-};
+});