chore: `ComposerBoxPopup` Items alignment (#29320)

apps/meteor/app/ui-message/client/popup/ComposerBoxPopup.tsx

@@ -59,7 +59,7 @@ const ComposerBoxPopup = <
 
 	return (
 		<Box className='message-popup-position' position='relative'>
-			<Tile className='message-popup' padding={0} role='menu' mbe='x8' aria-labelledby={id}>
+			<Tile className='message-popup' padding={0} role='menu' mbe='x8' overflow='hidden' aria-labelledby={id}>
 				{title && (
 					<Box bg='tint' pi='x16' pb='x8' id={id}>
 						{title}
@@ -67,6 +67,7 @@ const ComposerBoxPopup = <
 				)}
 				<Box pb='x8' maxHeight='x320'>
 					{!isLoading && itemsFlat.length === 0 && <Option>{t('No_results_found')}</Option>}
+					{isLoading && <OptionSkeleton />}
 					{itemsFlat.map((item, index) => {
 						return (
 							<Option
@@ -81,7 +82,6 @@ const ComposerBoxPopup = <
 							</Option>
 						);
 					})}
-					{isLoading && <OptionSkeleton />}
 				</Box>
 			</Tile>
 		</Box>

apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupSlashCommand.tsx

 import React from 'react';
-import { OptionColumn, OptionContent } from '@rocket.chat/fuselage';
+import { OptionColumn, OptionContent, OptionDescription, OptionInput } from '@rocket.chat/fuselage';
 
 export type ComposerBoxPopupSlashCommandProps = {
 	_id: string;
@@ -10,10 +10,12 @@ export type ComposerBoxPopupSlashCommandProps = {
 const ComposerPopupSlashCommand = ({ _id, description, params }: ComposerBoxPopupSlashCommandProps) => {
 	return (
 		<>
+			<OptionContent>
+				{_id} <OptionDescription>{params}</OptionDescription>
+			</OptionContent>
 			<OptionColumn>
-				<strong>{_id}</strong> {params}
+				<OptionInput>{description}</OptionInput>
 			</OptionColumn>
-			<OptionContent>{description}</OptionContent>
 		</>
 	);
 };

apps/meteor/app/ui-message/client/popup/components/composerBoxPopup/ComposerBoxPopupUser.tsx

 import React from 'react';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import { OptionAvatar, OptionColumn, OptionContent } from '@rocket.chat/fuselage';
+import { OptionAvatar, OptionColumn, OptionContent, OptionInput } from '@rocket.chat/fuselage';
 
 import UserAvatar from '../../../../../../client/components/avatar/UserAvatar';
 import ReactiveUserStatus from '../../../../../../client/components/UserStatus/ReactiveUserStatus';
@@ -42,8 +42,16 @@ const ComposerBoxPopupUser = ({ _id, system, username, name, nickname, outside,
 				</OptionContent>
 			)}
 
-			{outside && <OptionColumn>{t('Not_in_channel')}</OptionColumn>}
-			{suggestion && <OptionColumn>{t('Suggestion_from_recent_messages')}</OptionColumn>}
+			{outside && (
+				<OptionColumn>
+					<OptionInput>{t('Not_in_channel')}</OptionInput>
+				</OptionColumn>
+			)}
+			{suggestion && (
+				<OptionColumn>
+					<OptionInput>{t('Suggestion_from_recent_messages')}</OptionInput>
+				</OptionColumn>
+			)}
 		</>
 	);
 };

apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts

@@ -260,9 +260,7 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 		ariaActiveDescendant,
 		popup,
 		select,
-
 		suspended,
-
 		commandsRef,
 		callbackRef,
 	};