Initial transfer from ADO (#13)

src/Explorer/Controls/Tabs/TabComponent.less

@@ -1,27 +1,28 @@
 @import "../../../../less/Common/Constants";
 
-.tabSwitch {
-  margin-left: @LargeSpace;
-  margin-bottom: 20px;
-
-  .tab {
-      margin-right: @MediumSpace;
-  }
-
-  .toggleSwitch {
-      .toggleSwitch();
-  }
-
-  .selectedToggle {
-      .selectedToggle();
-  }
-
-  .unselectedToggle {
-      .unselectedToggle();
-  }
-}
-
-.tabComponentContent {
-    height: calc(100% - 20px);
+.tabComponentContainer {
+    height: 100%;
     .flex-display();
+    .flex-direction();
+
+    .tabSwitch {
+        margin-left: @LargeSpace;
+        margin-bottom: 20px;
+
+        .tab {
+            margin-right: @MediumSpace;
+        }
+
+        .toggleSwitch {
+            .toggleSwitch();
+        }
+
+        .selectedToggle {
+            .selectedToggle();
+        }
+
+        .unselectedToggle {
+            .unselectedToggle();
+        }
+      }
 }

src/Explorer/Controls/Tabs/TabComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import "./TabComponent.less";
 
 export interface TabContent {
   render: () => JSX.Element;
@@ -75,10 +76,10 @@ export class TabComponent extends React.Component<TabComponentProps> {
     }
 
     return (
-      <React.Fragment>
+      <div className="tabComponentContainer">
         {!this.props.hideHeader && <div className="tabs tabSwitch">{this.renderTabTitles()}</div>}
         <div className={className}>{currentTabContent.render()}</div>
-      </React.Fragment>
+      </div>
     );
   }
 }