Fix topbar layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/main/index.ts

@@ -29,7 +29,7 @@ import * as LensExtensionsMainApi from "../extensions/main-api";
 import { app, autoUpdater, BrowserWindow, dialog, Menu, powerMonitor } from "electron";
 import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
-import { WindowManager } from "./window-manager";
+import { IpcMainWindowEvents, WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
 import { shellSync } from "./shell-sync";
 import { mangleProxyEnv } from "./proxy-env";
@@ -256,10 +256,10 @@ app.on("ready", async () => {
     LensProtocolRouterMain.getInstance().rendererLoaded = true;
   });
 
-  ipcMainOn("show-app-context-menu", (event) => {
+  ipcMainOn(IpcMainWindowEvents.OPEN_CONTEXT_MENU, (event) => {
     const menu = Menu.buildFromTemplate(getAppMenu(windowManager));
 
-    menu.popup(BrowserWindow.fromWebContents(event.sender) as any);
+    menu.popup(BrowserWindow.fromWebContents(event.sender) as Electron.PopupOptions);
   });
 
   logger.info("🧩 Initializing extensions");

src/renderer/components/layout/topbar.module.css

@@ -20,14 +20,12 @@
  */
 
 .topBar {
-  display: grid;
+  display: flex;
-  grid-template-columns: [title] 1fr [controls] auto;
-  grid-template-rows: var(--main-layout-header);
-  grid-template-areas: "title controls";
   background-color: var(--layoutBackground);
   z-index: 2;
   width: 100%;
   grid-area: topbar;
+  justify-content: space-between;
 }
 
 .winMenu {
@@ -60,6 +58,13 @@
   height: 100%;
 }
 
+.winDraggableArea {
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+  flex-grow: 1;
+  background-color: aliceblue;
+}
+
 .winButtons {
   display: flex;
   margin-left: 1.5rem;

src/renderer/components/layout/topbar.tsx

@@ -20,7 +20,7 @@
  */
 
 import styles from "./topbar.module.css";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
 import { Icon } from "../icon";
@@ -48,6 +48,8 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
 });
 
 export const TopBar = observer(({ children, ...rest }: Props) => {
+  const elem = useRef<HTMLDivElement>();
+
   const renderRegisteredItems = () => {
     const items = TopBarRegistry.getInstance().getItems();
 
@@ -88,7 +90,12 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     webContents.getAllWebContents().find((webContent) => webContent.getType() === "window")?.goForward();
   };
 
-  const windowSizeToggle = () => {
+  const windowSizeToggle = (evt: React.MouseEvent) => {
+    if (elem.current != evt.target) {
+      // Skip clicking on child elements
+      return;
+    }
+
     const window = getCurrentWindow();
 
     if (window.isMaximized()) {
@@ -105,12 +112,12 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
   }, []);
 
   return (
-    <div className={styles.topBar} {...rest}>
+    <div className={styles.topBar} onDoubleClick={windowSizeToggle} ref={elem} {...rest}>
-      <div className={styles.tools} onDoubleClick={windowSizeToggle}>
+      <div className={styles.tools}>
         <div className={styles.winMenu}>
           {(isWindows || isLinux) && (
             <div onClick={openContextMenu} data-testid="window-menu">
-              <svg width="12" height="12" viewBox="0 0 12 12"><path fill="currentColor" d="m1 10h10v1h-10z"/><path fill="currentColor" d="m1 5.5h10v1h-10z"/><path fill="currentColor" d="m1 1h10v1h-10z"/></svg>
+              <svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges"><path fill="currentColor" d="m1 10h10v1h-10z"/><path fill="currentColor" d="m1 5.5h10v1h-10z"/><path fill="currentColor" d="m1 1h10v1h-10z"/></svg>
             </div>
           )}
         </div>