regression: EmojiPicker not being displayed correctly (#32720)

Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>

apps/meteor/client/components/CustomScrollbars/CustomScrollbars.tsx

@@ -16,7 +16,6 @@ export type CustomScrollbarsProps = {
 
 const styleDefault: CSSProperties = {
 	flexGrow: 1,
-	willChange: 'transform',
 	overflowY: 'hidden',
 };
 

apps/meteor/client/components/Page/PageScrollableContent.tsx

+import { css } from '@rocket.chat/css-in-js';
 import type { Scrollable } from '@rocket.chat/fuselage';
 import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
@@ -24,8 +25,18 @@ const PageScrollableContent = forwardRef<HTMLElement, PageScrollableContentProps
 			overflow='hidden'
 			borderBlockEndColor={borderBlockEndColor}
 		>
-			<CustomScrollbars onScroll={onScrollContent as CustomScrollbarsProps['onScroll']} ref={ref as any}>
-				<Box paddingBlock={16} paddingInline={24} display='flex' flexDirection='column' flexGrow={1} {...props} />
+			<CustomScrollbars onScroll={onScrollContent as CustomScrollbarsProps['onScroll']} ref={ref}>
+				<Box
+					className={css`
+						transform: translateZ(0);
+					`}
+					height='100%'
+					paddingBlock={16}
+					paddingInline={24}
+					display='flex'
+					flexDirection='column'
+					{...props}
+				/>
 			</CustomScrollbars>
 		</Box>
 	);