From 82cf5bbb0df140b39507a72e0ed3267f7f64432c Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Thu, 26 Mar 2026 15:52:03 -0300
Subject: [PATCH 1/2] fix(ui): Use portal for expanded view in threads

---
 .../room/contextualBar/Threads/Thread.tsx     | 132 ++++++++++--------
 1 file changed, 77 insertions(+), 55 deletions(-)

diff --git a/apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx b/apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx
index ddccdeb501563..78f6edd444426 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx
+++ b/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>
 	);

From 7c4ad36d5dd89302022e14bae251556367f04fc9 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Fri, 27 Mar 2026 10:16:25 -0300
Subject: [PATCH 2/2] chore: changeset

---
 .changeset/stale-drinks-report.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stale-drinks-report.md

diff --git a/.changeset/stale-drinks-report.md b/.changeset/stale-drinks-report.md
new file mode 100644
index 0000000000000..21977873c7f62
--- /dev/null
+++ b/.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