fix: Settings code mirror broken on full screen mode (#32625)

.changeset/odd-goats-fix.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where settings code mirror is not being displayed correctly in full screen mode

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

@@ -1,8 +1,8 @@
 import { Palette } from '@rocket.chat/fuselage';
 import type { ScrollValues } from 'rc-scrollbars';
 import { Scrollbars } from 'rc-scrollbars';
-import type { MutableRefObject, CSSProperties, ReactNode, ReactElement } from 'react';
-import React, { memo, forwardRef, useCallback } from 'react';
+import type { MutableRefObject, CSSProperties, ReactNode } from 'react';
+import React, { memo, forwardRef, useCallback, useMemo } from 'react';
 
 export type CustomScrollbarsProps = {
 	overflowX?: boolean;
@@ -14,10 +14,18 @@ export type CustomScrollbarsProps = {
 	autoHide?: boolean;
 };
 
+const styleDefault: CSSProperties = {
+	flexGrow: 1,
+	willChange: 'transform',
+	overflowY: 'hidden',
+};
+
 const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function CustomScrollbars(
-	{ children, onScroll, overflowX, renderView, ...props },
+	{ children, style, onScroll, overflowX, renderView, ...props },
 	ref,
 ) {
+	const scrollbarsStyle = useMemo(() => ({ ...style, ...styleDefault }), [style]);
+
 	const refSetter = useCallback(
 		(scrollbarRef) => {
 			if (ref && scrollbarRef) {
@@ -38,12 +46,11 @@ const CustomScrollbars = forwardRef<HTMLElement, CustomScrollbarsProps>(function
 			autoHide
 			autoHideTimeout={2000}
 			autoHideDuration={500}
+			style={scrollbarsStyle}
 			onScrollFrame={onScroll}
 			renderView={renderView}
-			renderTrackHorizontal={
-				overflowX ? undefined : (props): ReactElement => <div {...props} className='track-horizontal' style={{ display: 'none' }} />
-			}
-			renderThumbVertical={({ style, ...props }): JSX.Element => (
+			renderTrackHorizontal={overflowX ? undefined : (props) => <div {...props} className='track-horizontal' style={{ display: 'none' }} />}
+			renderThumbVertical={({ style, ...props }) => (
 				<div {...props} style={{ ...style, backgroundColor: Palette.stroke['stroke-dark'].toString(), borderRadius: '4px' }} />
 			)}
 			children={children}

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

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactElement, Ref } from 'react';
+import type { ComponentProps, Ref } from 'react';
 import React, { forwardRef } from 'react';
 
 import CustomScrollbars from './CustomScrollbars';
@@ -8,13 +8,9 @@ type VirtuosoScrollbarsProps = ComponentProps<typeof CustomScrollbars>;
 const VirtuosoScrollbars = forwardRef(function VirtuosoScrollbars(
 	{ style, children, ...props }: VirtuosoScrollbarsProps,
 	ref: Ref<HTMLDivElement>,
-): ReactElement {
+) {
 	return (
-		<CustomScrollbars
-			style={{ ...style, flexGrow: 1, overflowY: 'hidden', width: '100%', willChange: 'transform' }}
-			ref={ref}
-			renderView={(viewProps): ReactElement => <div {...viewProps} {...props} />}
-		>
+		<CustomScrollbars style={style} ref={ref} renderView={(viewProps) => <div {...viewProps} {...props} />}>
 			{children}
 		</CustomScrollbars>
 	);

apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx

@@ -39,7 +39,9 @@ const CodeMirrorBox = ({ label, children }: { label: ReactNode; children: ReactE
 					{label}
 				</Box>
 			)}
-			{children}
+			<Box display='flex' flexDirection='column' height='100%' role='code' aria-label={typeof label === 'string' ? label : undefined}>
+				{children}
+			</Box>
 			<Box mbs={8}>
 				<ButtonGroup>
 					<Button primary onClick={(): void => toggleFullScreen()}>

apps/meteor/tests/e2e/administration.spec.ts

@@ -335,5 +335,18 @@ test.describe.parallel('administration', () => {
 				await poAdmin.btnResetSiteURL.click();
 			});
 		});
+
+		test.describe('Layout', () => {
+			test.beforeEach(async ({ page }) => {
+				await page.goto('/admin/settings/Layout');
+			});
+
+			test('should code mirror full screen be displayed correctly', async ({ page }) => {
+				await poAdmin.getAccordionBtnByName('Custom CSS').click();
+				await poAdmin.btnFullScreen.click();
+
+				await expect(page.getByRole('code')).toHaveCSS('width', '920px');
+			});
+		});
 	});
 });

apps/meteor/tests/e2e/page-objects/admin.ts

@@ -256,4 +256,12 @@ export class Admin {
 	get inputWebhookUrl(): Locator {
 		return this.page.getByRole('textbox', { name: 'Webhook URL' });
 	}
+
+	getAccordionBtnByName(name: string): Locator {
+		return this.page.getByRole('button', { name });
+	}
+
+	get btnFullScreen(): Locator {
+		return this.page.getByRole('button', { name: 'Full Screen' });
+	}
 }