From d6d363bea1d5393ad2b0d0dccc4ebfbc30e824d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= <jvaclavik@gmail.com>
Date: Fri, 7 Feb 2025 12:00:41 +0100
Subject: [PATCH] fix(suite): Delete container query (#16816)

---
 .../SuiteLayout/Sidebar/Navigation.tsx        | 28 ++++++++--------
 .../Sidebar/QuickActions/QuickActions.tsx     | 32 +++++++++++--------
 .../layouts/SuiteLayout/Sidebar/consts.ts     |  3 --
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx
index 718b2279202..a5a565a1724 100644
--- a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx
+++ b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx
@@ -6,18 +6,16 @@ import { spacingsPx } from '@trezor/theme';
 
 import { NavigationItem, NavigationItemProps } from './NavigationItem';
 import { NotificationDropdown } from './NotificationDropdown';
-import { isCollapsedSidebar } from './consts';
+import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
 
-const Nav = styled.nav`
+const Nav = styled.nav<{ $isSidebarCollapsed: boolean }>`
     display: flex;
     flex-direction: column;
     gap: ${spacingsPx.xxs};
     margin: ${spacingsPx.xs};
     align-items: stretch;
 
-    @container ${isCollapsedSidebar} {
-        align-items: center;
-    }
+    ${({ $isSidebarCollapsed }) => $isSidebarCollapsed && `align-items: center;`}
 `;
 
 const navItems: Array<NavigationItemProps & { CustomComponent?: FC<NavigationItemProps> }> = [
@@ -41,12 +39,16 @@ const navItems: Array<NavigationItemProps & { CustomComponent?: FC<NavigationIte
     },
 ];
 
-export const Navigation = () => (
-    <Nav>
-        {navItems.map(item => {
-            const Component = item.CustomComponent ? item.CustomComponent : NavigationItem;
+export const Navigation = () => {
+    const { isSidebarCollapsed } = useResponsiveContext();
 
-            return <Component key={item.nameId} {...item} />;
-        })}
-    </Nav>
-);
+    return (
+        <Nav $isSidebarCollapsed={isSidebarCollapsed}>
+            {navItems.map(item => {
+                const Component = item.CustomComponent ? item.CustomComponent : NavigationItem;
+
+                return <Component key={item.nameId} {...item} />;
+            })}
+        </Nav>
+    );
+};
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx
index 04d25d29ce5..f58457f17f7 100644
--- a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx
+++ b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx
@@ -6,10 +6,10 @@ import { CustomBackend } from './CustomBackend';
 import { DebugAndExperimental } from './DebugAndExperimental';
 import { HideBalances } from './HideBalances';
 import { Tor } from './Tor';
-import { isCollapsedSidebar } from '../consts';
 import { UpdateStatusActionBarIcon } from './Update/UpdateStatusActionBarIcon';
+import { useResponsiveContext } from '../../../../../../support/suite/ResponsiveContext';
 
-const ActionsContainer = styled.div`
+const ActionsContainer = styled.div<{ $isSidebarCollapsed: boolean }>`
     display: flex;
     gap: ${spacingsPx.xs};
 
@@ -17,9 +17,7 @@ const ActionsContainer = styled.div`
     padding: 0 ${spacingsPx.xs};
     align-items: stretch;
 
-    @container ${isCollapsedSidebar} {
-        flex-direction: column;
-    }
+    ${({ $isSidebarCollapsed }) => $isSidebarCollapsed && `flex-direction: column;`}
 
     > * {
         flex: 1;
@@ -30,12 +28,18 @@ type QuickActionsProps = {
     showUpdateBannerNotification: boolean;
 };
 
-export const QuickActions = ({ showUpdateBannerNotification }: QuickActionsProps) => (
-    <ActionsContainer>
-        <UpdateStatusActionBarIcon showUpdateBannerNotification={showUpdateBannerNotification} />
-        <DebugAndExperimental />
-        <CustomBackend />
-        <Tor />
-        <HideBalances />
-    </ActionsContainer>
-);
+export const QuickActions = ({ showUpdateBannerNotification }: QuickActionsProps) => {
+    const { isSidebarCollapsed } = useResponsiveContext();
+
+    return (
+        <ActionsContainer $isSidebarCollapsed={isSidebarCollapsed}>
+            <UpdateStatusActionBarIcon
+                showUpdateBannerNotification={showUpdateBannerNotification}
+            />
+            <DebugAndExperimental />
+            <CustomBackend />
+            <Tor />
+            <HideBalances />
+        </ActionsContainer>
+    );
+};
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts
index b2e06e15224..155751af0b3 100644
--- a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts
+++ b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/consts.ts
@@ -1,4 +1 @@
 export const SIDEBAR_COLLAPSED_WIDTH = 200;
-
-export const isCollapsedSidebar = `(max-width: ${SIDEBAR_COLLAPSED_WIDTH}px)`;
-export const isExpandedSidebar = `(min-width: ${SIDEBAR_COLLAPSED_WIDTH}px)`;