fix(ui): Expanded thread view overlapping NavBar (#39892)

Author: dougfabris

.changeset/stale-drinks-report.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where the expanded thread view was overlapping the navbar

apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx

@@ -19,6 +19,7 @@ import {
 	useUserId,
 	useRoomToolbox,
 } from '@rocket.chat/ui-contexts';
+import { createPortal } from 'react-dom';
 
 import ThreadChat from './components/ThreadChat';
 import ThreadSkeleton from './components/ThreadSkeleton';
@@ -82,64 +83,85 @@ const Thread = ({ tmid }: ThreadProps) => {
 		closeTab();
 	};
 
+	const isExpanded = canExpand && expanded;
+	const portalTarget = isExpanded ? document.getElementById('main-content') : null;
+
+	const threadContent = (
+		<Contextualbar
+			rcx-thread-view
+			className={
+				isExpanded
+					? css`
+							max-width: 855px !important;
+							@media (min-width: 780px) and (max-width: 1135px) {
+								max-width: calc(100% - var(--sidebar-width)) !important;
+							}
+						`
+					: undefined
+			}
+			position='absolute'
+			display='flex'
+			flexDirection='column'
+			width='full'
+			overflow='hidden'
+			zIndex={100}
+			insetBlock={0}
+			border='none'
+		>
+			<ContextualbarHeader>
+				<ContextualbarBack onClick={handleGoBack} />
+				{(mainMessageQueryResult.isLoading && <Skeleton width='100%' />) ||
+					(mainMessageQueryResult.isSuccess && <ThreadTitle mainMessage={mainMessageQueryResult.data} />) ||
+					null}
+				<ContextualbarActions>
+					{canExpand && (
+						<ContextualbarAction
+							name={expanded ? 'arrow-collapse' : 'arrow-expand'}
+							title={expanded ? t('Collapse') : t('Expand')}
+							onClick={handleToggleExpand}
+						/>
+					)}
+					<ContextualbarAction
+						name={following ? 'bell' : 'bell-off'}
+						title={following ? t('Following') : t('Not_Following')}
+						disabled={!mainMessageQueryResult.isSuccess || toggleFollowingMutation.isPending}
+						onClick={handleToggleFollowing}
+					/>
+					<ContextualbarClose onClick={handleClose} />
+				</ContextualbarActions>
+			</ContextualbarHeader>
+
+			{(mainMessageQueryResult.isLoading && <ThreadSkeleton />) ||
+				(mainMessageQueryResult.isSuccess && (
+					<ChatProvider tmid={tmid}>
+						<ThreadChat mainMessage={mainMessageQueryResult.data} />
+					</ChatProvider>
+				)) ||
+				null}
+		</Contextualbar>
+	);
+
 	return (
 		<ContextualbarDialog>
 			<ContextualbarInnerContent>
-				{canExpand && expanded && <ModalBackdrop onClick={handleBackdropClick} />}
-				<Box flexGrow={1} position={expanded ? 'static' : 'relative'}>
-					<Contextualbar
-						rcx-thread-view
-						className={
-							canExpand && expanded
-								? css`
-										max-width: 855px !important;
-										@media (min-width: 780px) and (max-width: 1135px) {
-											max-width: calc(100% - var(--sidebar-width)) !important;
-										}
-									`
-								: undefined
-						}
-						position={expanded ? 'fixed' : 'absolute'}
-						display='flex'
-						flexDirection='column'
-						width='full'
-						overflow='hidden'
-						zIndex={100}
-						insetBlock={0}
-						border='none'
-					>
-						<ContextualbarHeader>
-							<ContextualbarBack onClick={handleGoBack} />
-							{(mainMessageQueryResult.isLoading && <Skeleton width='100%' />) ||
-								(mainMessageQueryResult.isSuccess && <ThreadTitle mainMessage={mainMessageQueryResult.data} />) ||
-								null}
-							<ContextualbarActions>
-								{canExpand && (
-									<ContextualbarAction
-										name={expanded ? 'arrow-collapse' : 'arrow-expand'}
-										title={expanded ? t('Collapse') : t('Expand')}
-										onClick={handleToggleExpand}
-									/>
-								)}
-								<ContextualbarAction
-									name={following ? 'bell' : 'bell-off'}
-									title={following ? t('Following') : t('Not_Following')}
-									disabled={!mainMessageQueryResult.isSuccess || toggleFollowingMutation.isPending}
-									onClick={handleToggleFollowing}
-								/>
-								<ContextualbarClose onClick={handleClose} />
-							</ContextualbarActions>
-						</ContextualbarHeader>
-
-						{(mainMessageQueryResult.isLoading && <ThreadSkeleton />) ||
-							(mainMessageQueryResult.isSuccess && (
-								<ChatProvider tmid={tmid}>
-									<ThreadChat mainMessage={mainMessageQueryResult.data} />
-								</ChatProvider>
-							)) ||
-							null}
-					</Contextualbar>
-				</Box>
+				{portalTarget ? (
+					createPortal(
+						<>
+							<ModalBackdrop
+								className={css`
+									position: absolute !important;
+								`}
+								onClick={handleBackdropClick}
+							/>
+							{threadContent}
+						</>,
+						portalTarget,
+					)
+				) : (
+					<Box flexGrow={1} position='relative'>
+						{threadContent}
+					</Box>
+				)}
 			</ContextualbarInnerContent>
 		</ContextualbarDialog>
 	);