chore: Renders `CodeMirrorBox`s full screen mode through portal (#32811)

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

-import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useToggle } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
+import { createPortal } from 'react-dom';
 
 const CodeMirrorBox = ({ label, children }: { label: ReactNode; children: ReactElement }) => {
 	const t = useTranslation();
 	const [fullScreen, toggleFullScreen] = useToggle(false);
 
-	const fullScreenStyle = css`
-		position: fixed;
-		z-index: 100;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-
-		display: flex;
-
-		flex-direction: column;
-
-		width: auto;
-		height: auto;
-
-		padding: 40px;
-
-		align-items: stretch;
-	`;
-
-	return (
-		<Box
-			backgroundColor='light'
-			className={['code-mirror-box', fullScreen && 'code-mirror-box-fullscreen', fullScreen && fullScreenStyle].filter(Boolean)}
-		>
-			{fullScreen && (
+	if (fullScreen) {
+		return createPortal(
+			<Box
+				className='code-mirror-box code-mirror-box-fullscreen'
+				color='default'
+				backgroundColor='light'
+				position='absolute'
+				zIndex={100}
+				display='flex'
+				flexDirection='column'
+				width='100%'
+				height='100%'
+				p={40}
+			>
 				<Box fontScale='p1' mbe={4}>
 					{label}
 				</Box>
-			)}
+				<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()}>
+							{t('Exit_Full_Screen')}
+						</Button>
+					</ButtonGroup>
+				</Box>
+			</Box>,
+			document.getElementById('main-content') as HTMLElement,
+		);
+	}
+
+	return (
+		<Box className='code-mirror-box'>
 			<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()}>
-						{fullScreen ? t('Exit_Full_Screen') : t('Full_Screen')}
+						{t('Full_Screen')}
 					</Button>
 				</ButtonGroup>
 			</Box>