diff --git a/packages/synapse-react-client/src/components/entity/page/title_bar/EntityPageTitleBar.tsx b/packages/synapse-react-client/src/components/entity/page/title_bar/EntityPageTitleBar.tsx
index db0e54e2db..da1ff7f42a 100644
--- a/packages/synapse-react-client/src/components/entity/page/title_bar/EntityPageTitleBar.tsx
+++ b/packages/synapse-react-client/src/components/entity/page/title_bar/EntityPageTitleBar.tsx
@@ -48,14 +48,9 @@ export default function EntityPageTitleBar(props: EntityPageTitleBarProps) {
         }}
       >
         <Stack
-          sx={theme => ({
-            [theme.breakpoints.down('sm')]: {
-              flexDirection: 'column',
-            },
-            [theme.breakpoints.up('sm')]: {
-              flexDirection: 'row',
-            },
-          })}
+          sx={{
+            flexDirection: { xs: 'column', sm: 'row' },
+          }}
         >
           <Stack
             direction={'row'}
diff --git a/packages/synapse-react-client/src/components/menu/ComplexMenu.tsx b/packages/synapse-react-client/src/components/menu/ComplexMenu.tsx
index e7664250b3..ab4c43b994 100644
--- a/packages/synapse-react-client/src/components/menu/ComplexMenu.tsx
+++ b/packages/synapse-react-client/src/components/menu/ComplexMenu.tsx
@@ -33,7 +33,7 @@ export function ComplexMenu(props: ComplexMenuProps) {
         alignItems: 'center',
         gap: '10px',
         [theme.breakpoints.down('sm')]: {
-          flexWrap: 'wrap',
+          flexDirection: 'column',
           paddingTop: '10px',
         },
       })}