From 9869cfd58fd4f30d78a2c5eb02163496962f5118 Mon Sep 17 00:00:00 2001
From: MartinSchoeler <martinschoeler8@gmail.com>
Date: Wed, 17 Jun 2026 16:03:26 -0300
Subject: [PATCH] fix: full screen video resizing and moving message list

---
 .../attachments/file/VideoAttachment.tsx        | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx b/apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx
index 4768e01d41cda..c5575731f1853 100644
--- a/apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/file/VideoAttachment.tsx
@@ -1,7 +1,7 @@
 import type { VideoAttachmentProps } from '@rocket.chat/core-typings';
 import { Box, MessageGenericPreview } from '@rocket.chat/fuselage';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useReloadOnError } from './hooks/useReloadOnError';
 import { userAgentMIMETypeFallback } from '../../../../../lib/utils/userAgentMIMETypeFallback';
@@ -23,13 +23,24 @@ const VideoAttachment = ({
 	const getURL = useMediaUrl();
 	const src = useMemo(() => getURL(url), [getURL, url]);
 	const { mediaRef } = useReloadOnError(src, 'video');
+	const [lockedHeight, setLockedHeight] = useState<number | undefined>();
 
 	return (
 		<>
 			{descriptionMd ? <MessageContentBody md={descriptionMd} /> : <MarkdownText parseEmoji content={description} />}
 			<MessageCollapsible title={title} hasDownload={hasDownload} link={getURL(link || url)} size={size} isCollapsed={collapsed}>
-				<MessageGenericPreview style={{ maxWidth: 368, width: '100%' }}>
-					<Box is='video' controls preload='metadata' ref={mediaRef}>
+				<MessageGenericPreview style={{ maxWidth: 368, width: '100%', minHeight: lockedHeight }}>
+					<Box
+						is='video'
+						minHeight={80}
+						controls
+						preload='metadata'
+						ref={mediaRef}
+						onLoadedMetadata={(event) => {
+							const video = event.currentTarget as HTMLVideoElement;
+							setLockedHeight(video.parentElement?.offsetHeight);
+						}}
+					>
 						<source src={getURL(url)} type={userAgentMIMETypeFallback(type)} />
 					</Box>
 				</MessageGenericPreview>