fix(suite): Fix draggable window area on mac (#14175)

Author: jvaclavik

packages/components/src/components/buttons/Button/Button.tsx

@@ -47,6 +47,7 @@ type ButtonContainerProps = TransientProps<AllowedFrameProps> & {
 };
 
 export const ButtonContainer = styled.button<ButtonContainerProps>`
+    -webkit-app-region: no-drag;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import styled from 'styled-components';
 
+import { zIndices } from '@trezor/theme';
 import { isDesktop, isMacOs } from '@trezor/env-utils';
 
 type Props = {
@@ -11,15 +12,23 @@ type Props = {
 };
 
 // See: https://github.com/electron/electron/issues/5678
-const FixForNotBeingAbleToDragWindow = styled.div`
+// Visible all the time in the app
+const ThinFixForNotBeingAbleToDragWindow = styled.div`
     -webkit-app-region: drag;
-    height: 12px;
+    height: 16px;
     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%;
@@ -35,7 +44,8 @@ export const TrafficLightOffset = ({ children, offset = 35, isVisible = true }:
 
     return (
         <>
-            <FixForNotBeingAbleToDragWindow />
+            <ThinFixForNotBeingAbleToDragWindow />
+            <ThickFixForNotBeingAbleToDragWindow />
             <Container $offset={offset}>{children}</Container>
         </>
     );

packages/suite/src/components/suite/banners/SuiteBanners/SuiteBanners.tsx

@@ -34,6 +34,7 @@ const Container = styled.div<{ $isVisible?: boolean }>`
     display: flex;
     flex-direction: column;
     gap: ${spacingsPx.xs};
+    position: relative; /* because it must be on the top of the draggable area on Mac */
 `;
 
 export const SuiteBanners = () => {

packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceSelector.tsx

@@ -56,6 +56,7 @@ const InnerContainer = styled.div`
     align-items: center;
     cursor: pointer;
     gap: ${spacingsPx.md};
+    -webkit-app-region: no-drag;
 `;
 
 export const DeviceSelector = () => {

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/AccountName/AccountDetails.tsx

@@ -52,6 +52,7 @@ const DetailsContainer = styled.div<{ $isBalanceShown: boolean; $shouldAnimate:
     animation: ${({ $isBalanceShown, $shouldAnimate }) =>
             getAnimation($isBalanceShown, $shouldAnimate)}
         0.3s forwards;
+    -webkit-app-region: no-drag;
 `;
 
 // eslint-disable-next-line local-rules/no-override-ds-component

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/BasicName.tsx

@@ -9,6 +9,7 @@ import { Translation } from 'src/components/suite';
 export const HeaderHeading = styled(H2)`
     display: flex;
     align-items: center;
+    -webkit-app-region: no-drag;
 `;
 
 export interface BasicNameProps {

packages/theme/src/zIndices.ts

@@ -2,6 +2,7 @@
 // modals should have `zIndex` in interval [1040; 1050).
 
 export const zIndices = {
+    windowControls: 100,
     tooltip: 60, // above all content to be always fully visible when toggled
     guide: 50, // above MODAL to stay accessible when modal is open
     guideButton: 49, // below GUIDE to get covered by the guide when it is opening