reduce height on draggable-top and only render it on macos (#942)

* reduce height on draggable-top and only render it on macos

* move drag bar out of app and into bootstrap

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/bootstrap.tsx

@@ -31,7 +31,10 @@ export async function bootstrap(App: AppComponent) {
   if (App.init) {
     await App.init();
   }
-  render(<App/>, rootElem);
+  render(<>
+    {isMac && <div id="draggable-top" />}
+    <App />
+  </>, rootElem);
 }
 
 // run

src/renderer/components/app.scss

@@ -13,6 +13,7 @@
 :root {
   --mainBackground: #1e2124;
   --main-layout-header: 40px;
+  --drag-region-height: 22px
 }
 
 ::selection {
@@ -47,7 +48,7 @@ html, body {
   left: 0;
   top: 0;
   width: 100%;
-  height: var(--main-layout-header);
+  height: var(--drag-region-height);
   z-index: 1000;
   pointer-events: none;
 }

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -14,6 +14,7 @@ import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
 import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
+import { isMac } from "../../../common/vars";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -53,21 +54,20 @@ export class ClusterManager extends React.Component {
   render() {
     return (
       <div className="ClusterManager">
-        <div id="draggable-top"/>
         <main>
-          <div id="lens-views"/>
+          <div id="lens-views" />
           <Switch>
-            <Route component={LandingPage} {...landingRoute}/>
-            <Route component={Preferences} {...preferencesRoute}/>
-            <Route component={Workspaces} {...workspacesRoute}/>
-            <Route component={AddCluster} {...addClusterRoute}/>
-            <Route component={ClusterView} {...clusterViewRoute}/>
-            <Route component={ClusterSettings} {...clusterSettingsRoute}/>
-            <Redirect exact to={this.startUrl}/>
+            <Route component={LandingPage} {...landingRoute} />
+            <Route component={Preferences} {...preferencesRoute} />
+            <Route component={Workspaces} {...workspacesRoute} />
+            <Route component={AddCluster} {...addClusterRoute} />
+            <Route component={ClusterView} {...clusterViewRoute} />
+            <Route component={ClusterSettings} {...clusterSettingsRoute} />
+            <Redirect exact to={this.startUrl} />
           </Switch>
         </main>
-        <ClustersMenu/>
-        <BottomBar/>
+        <ClustersMenu />
+        <BottomBar />
       </div>
     )
   }