diff --git a/src/renderer/components/layout/main-layout.scss b/src/renderer/components/layout/main-layout.scss
index 7d6ed41757..d423b0388f 100755
--- a/src/renderer/components/layout/main-layout.scss
+++ b/src/renderer/components/layout/main-layout.scss
@@ -6,7 +6,7 @@
     "aside main"
     "aside footer";
   grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
-  grid-template-columns: [sidebar] auto [main] 1fr;
+  grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
 
   height: 100%;
 
@@ -31,9 +31,13 @@
     background: $sidebarBackground;
     white-space: nowrap;
     transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    width: var(--sidebar-width);
+
+    &.pinned {
+      width: var(--sidebar-width);
+    }
 
     &:not(.pinned) {
+      position: absolute;
       width: var(--main-layout-header);
       height: 100%;
       overflow: hidden;
diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx
index cd25010f97..449d21d8f2 100755
--- a/src/renderer/components/layout/main-layout.tsx
+++ b/src/renderer/components/layout/main-layout.tsx
@@ -64,10 +64,6 @@ export class MainLayout extends React.Component<Props> {
     return headerPadding + appIcon + appName + pinningIcon + goodMeasure
   }
 
-  sidebarMaxWidth(): number {
-    return (window.innerWidth || 500) * 0.4
-  }
-
   render() {
     const { className, headerClass, footer, footerClass, children } = this.props;
     const cluster = getHostedCluster();
@@ -91,7 +87,7 @@ export class MainLayout extends React.Component<Props> {
             onDoubleClick={this.toggleSidebar}
             disabled={!this.isPinned}
             minExtent={this.sidebarMinWidth()}
-            maxExtent={this.sidebarMaxWidth()}
+            maxExtent={400}
           />
         </aside>
 
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index 0887dedcff..a3a3271e0d 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -6,7 +6,7 @@ import { computed, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { matchPath, NavLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { autobind, createStorage, cssNames } from "../../utils";
+import { createStorage, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
 import { namespacesURL } from "../+namespaces/namespaces.route";
@@ -71,19 +71,12 @@ export class Sidebar extends React.Component<Props> {
     });
   }
 
-  @autobind()
-  onDoubleClick() {
-    if (!this.props.isPinned) {
-      this.props.toggle()
-    }
-  }
-
   render() {
     const { toggle, isPinned, className } = this.props;
     const query = namespaceStore.getContextParams();
     return (
       <SidebarContext.Provider value={{ pinned: isPinned }}>
-        <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })} onDoubleClick={this.onDoubleClick}>
+        <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
           <div className="header flex align-center">
             <NavLink exact to="/" className="box grow">
               <Icon svg="logo-full" className="logo-icon" />
diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.scss b/src/renderer/components/resizing-anchor/resizing-anchor.scss
index 10e81c7533..310727af2c 100644
--- a/src/renderer/components/resizing-anchor/resizing-anchor.scss
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss
@@ -11,8 +11,7 @@ body.resizing {
   z-index: 10;
 
   &.disabled {
-    pointer-events: none;
-    cursor: unset;
+    display: none;
   }
 
   &.vertical {