fix: missing margins in message composer icons (#28430)

apps/meteor/client/views/room/components/body/composer/messageBox/MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx

@@ -19,7 +19,7 @@ type ActionsToolbarDropdownProps = {
 	actions?: ReactNode[];
 };
 
-const ActionsToolbarDropdown = ({ chatContext, isRecording, rid, tmid, actions }: ActionsToolbarDropdownProps) => {
+const ActionsToolbarDropdown = ({ chatContext, isRecording, rid, tmid, actions, ...props }: ActionsToolbarDropdownProps) => {
 	const t = useTranslation();
 	const reference = useRef(null);
 	const target = useRef(null);
@@ -46,7 +46,15 @@ const ActionsToolbarDropdown = ({ chatContext, isRecording, rid, tmid, actions }
 
 	return (
 		<>
-			<IconButton data-qa-id='menu-more-actions' disabled={isRecording} small ref={reference} icon='plus' onClick={() => toggle()} />
+			<IconButton
+				data-qa-id='menu-more-actions'
+				disabled={isRecording}
+				small
+				ref={reference}
+				icon='plus'
+				onClick={() => toggle()}
+				{...props}
+			/>
 			{isVisible && (
 				<Dropdown reference={reference} ref={target} placement='bottom-start'>
 					<OptionTitle>{t('Create_new')}</OptionTitle>

apps/meteor/client/views/room/components/body/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx

@@ -24,15 +24,17 @@ const MessageBoxActionsToolbar = ({
 	rid,
 	tmid,
 	isMicrophoneDenied,
+	...props
 }: MessageBoxActionsToolbarProps) => {
 	const actions = [
-		<VideoMessageAction key='video' collapsed={variant === 'small'} disabled={!canSend || typing || isRecording} />,
+		<VideoMessageAction key='video' collapsed={variant === 'small'} disabled={!canSend || typing || isRecording} {...props} />,
 		<AudioMessageAction
 			key='audio'
 			disabled={!canSend || typing || isRecording || isMicrophoneDenied}
 			isMicrophoneDenied={isMicrophoneDenied}
+			{...props}
 		/>,
-		<FileUploadAction key='file' collapsed={variant === 'small'} disabled={!canSend || isRecording} />,
+		<FileUploadAction key='file' collapsed={variant === 'small'} disabled={!canSend || isRecording} {...props} />,
 	];
 
 	let featuredAction;
@@ -44,7 +46,7 @@ const MessageBoxActionsToolbar = ({
 		<>
 			{variant !== 'small' && actions}
 			{variant === 'small' && featuredAction}
-			<ActionsToolbarDropdown {...(variant === 'small' && { actions })} isRecording={isRecording} rid={rid} tmid={tmid} />
+			<ActionsToolbarDropdown {...(variant === 'small' && { actions })} isRecording={isRecording} rid={rid} tmid={tmid} {...props} />
 		</>
 	);
 };