fix(suite): fix draggable window header (#16437)

* fix(suite): fix draggable window header

* fix(suite): Move window dragging area to Main in suite-desktop

Author: jvaclavik

packages/components/src/components/NewModal/NewModal.tsx

@@ -56,6 +56,7 @@ const Container = styled.div<
     overflow: hidden;
     background: ${mapElevationToBackground};
     box-shadow: ${({ theme }) => theme.boxShadowElevated};
+    -webkit-app-region: no-drag;
 
     ${withFrameProps}
 `;

packages/suite-desktop-ui/src/Main.tsx

@@ -14,7 +14,7 @@ import TrezorConnect from '@trezor/connect';
 import { initStore } from 'src/reducers/store';
 import { preloadStore } from 'src/support/suite/preloadStore';
 import { Metadata } from 'src/components/suite/Metadata';
-import { Preloader, ToastContainer } from 'src/components/suite';
+import { Preloader, ToastContainer, TrafficLightDraggableWindowHeader } from 'src/components/suite';
 import { ConnectedIntlProvider } from 'src/support/suite/ConnectedIntlProvider';
 import Resize from 'src/support/suite/Resize';
 import Autodetect from 'src/support/suite/Autodetect';
@@ -45,6 +45,7 @@ const Main = () => {
         // Todo: Enable when issues are fixed (ReactTruncate & BumpFee)
         // <StrictMode>
         <HelmetProvider>
+            <TrafficLightDraggableWindowHeader />
             <ConnectedThemeProvider>
                 <RouterProvider history={history}>
                     <ModalContextProvider>

packages/suite/src/components/suite/TrafficLightOffset.tsx

@@ -11,42 +11,40 @@ type Props = {
     isVisible?: boolean;
 };
 
-// See: https://github.com/electron/electron/issues/5678
-// Visible all the time in the app
-const ThinFixForNotBeingAbleToDragWindow = styled.div`
+const FixForNotBeingAbleToDragWindow = styled.div`
     -webkit-app-region: drag;
-    height: 16px;
+    pointer-events: none;
+    height: 64px;
     position: fixed;
     z-index: ${zIndices.windowControls};
     top: 0;
     left: 0;
     width: 100%;
 `;
 
-// Visible below content (but visible in the sidebar)
-const ThickFixForNotBeingAbleToDragWindow = styled(ThinFixForNotBeingAbleToDragWindow)`
-    height: 64px;
-    z-index: unset;
-`;
-
 const Container = styled.div<{ $offset: number }>`
     ${({ $offset }) => `padding-top: ${$offset}px;`}
     width: 100%;
     height: 100%;
 `;
 
+// See: https://github.com/electron/electron/issues/5678
+// Visible all the time in the app
+export const TrafficLightDraggableWindowHeader = ({ children, isVisible = true }: Props) => {
+    const isMac = isMacOs();
+    const isDesktopApp = isDesktop();
+
+    if (!isVisible || !isMac || !isDesktopApp) return children;
+
+    return <FixForNotBeingAbleToDragWindow />;
+};
+
 // on Mac in desktop app we don't use window bar and close/maximize/minimize icons are positioned directly in the app
 export const TrafficLightOffset = ({ children, offset = 35, isVisible = true }: Props) => {
     const isMac = isMacOs();
     const isDesktopApp = isDesktop();
 
     if (!isVisible || !isMac || !isDesktopApp) return children;
 
-    return (
-        <>
-            <ThinFixForNotBeingAbleToDragWindow />
-            <ThickFixForNotBeingAbleToDragWindow />
-            <Container $offset={offset}>{children}</Container>
-        </>
-    );
+    return <Container $offset={offset}>{children}</Container>;
 };

packages/suite/src/components/suite/index.tsx

@@ -47,6 +47,7 @@ import { QrCode } from './QrCode';
 import { CoinBalance } from './CoinBalance';
 import { DeviceAuthenticationExplainer } from './DeviceAuthenticationExplainer';
 import { Preloader } from './Preloader/Preloader';
+import { TrafficLightDraggableWindowHeader } from './TrafficLightOffset';
 import { PinMatrix } from './PinMatrix/PinMatrix';
 import { UdevDownload } from './UdevDownload';
 import { StakingFeature } from './StakingFeature';
@@ -100,6 +101,7 @@ export {
     CoinBalance,
     DeviceAuthenticationExplainer,
     Preloader,
+    TrafficLightDraggableWindowHeader,
     PinMatrix,
     UdevDownload,
     StakingFeature,

packages/suite/src/views/suite/SwitchDevice/SwitchDeviceModal.tsx

@@ -17,6 +17,7 @@ type SwitchDeviceModalProps = {
 
 const Container = styled.div`
     width: 378px;
+    -webkit-app-region: no-drag;
 `;
 
 const initial = {
@@ -51,7 +52,11 @@ export const SwitchDeviceModal = ({
                                 width: 369,
                                 height: 'auto',
                             }}
-                            style={{ originX: 0, originY: 0, overflow: 'hidden' }}
+                            style={{
+                                originX: 0,
+                                originY: 0,
+                                overflow: 'hidden',
+                            }}
                         >
                             {children}
                         </motion.div>