code · pull · Jul 16, 2026 · Jul 16, 2026 · Jul 16, 2026 · Jul 16, 2026
diff --git a/.changeset/tidy-snails-smile.md b/.changeset/tidy-snails-smile.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/apps": patch
+---
+
+Fixes app startup failing with EACCES errors in docker deployments running with specified UIDs
diff --git a/apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx b/apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx
@@ -29,7 +29,7 @@ const GameCenterContainer = ({ handleClose, handleBack, game }: IGameCenterConta
 				</ContextualbarTitle>
 				{handleClose && <ContextualbarClose onClick={handleClose} />}
 			</ContextualbarHeader>
-			<ContextualbarContent pb={16}>
+			<ContextualbarContent paddingBlock={16}>
 				<iframe title={t('Apps_Game_Center')} style={{ position: 'absolute', width: '95%', height: '80%' }} src={game.url} />
 			</ContextualbarContent>
 		</ContextualbarDialog>

diff --git a/apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx b/apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx
@@ -50,8 +50,8 @@ const GameCenterInvitePlayersModal = ({ game, onClose }: IGameCenterInvitePlayer
 	return (
 		<>
 			<GenericModal onClose={onClose} onCancel={onClose} onConfirm={sendInvite} title={t('Apps_Game_Center_Invite_Friends')}>
-				<Box mbe={16}>{t('Invite_Users')}</Box>
-				<Box mbe={16} display='flex' justifyContent='stretch'>
+				<Box marginBlockEnd={16}>{t('Invite_Users')}</Box>
+				<Box marginBlockEnd={16} display='flex' justifyContent='stretch'>
 					<UserAutoCompleteMultiple value={users} onChange={setUsers} federated />
 				</Box>
 			</GenericModal>

diff --git a/apps/meteor/client/components/ActionManagerBusyState.tsx b/apps/meteor/client/components/ActionManagerBusyState.tsx
@@ -33,8 +33,8 @@ const ActionManagerBusyState = () => {
 				`}
 				position='absolute'
 				insetInlineStart='50%'
-				p={16}
-				bg='tint'
+				padding={16}
+				backgroundColor='tint'
 				color='default'
 				textAlign='center'
 				fontSize='p2'

diff --git a/apps/meteor/client/components/Backdrop.tsx b/apps/meteor/client/components/Backdrop.tsx
@@ -3,4 +3,4 @@ import type { ComponentProps } from 'react';
 
 export type BackdropProps = ComponentProps<typeof ModalBackdrop>;
 
-export const Backdrop = (props: BackdropProps) => <ModalBackdrop bg='transparent' {...props} />;
+export const Backdrop = (props: BackdropProps) => <ModalBackdrop backgroundColor='transparent' {...props} />;
diff --git a/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx b/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx
@@ -115,7 +115,7 @@ const CreateDiscussion = ({
 			cancelText={t('Cancel')}
 			confirmLoading={createDiscussionMutation.isPending}
 		>
-			<Box mbe={24}>{t('Discussion_description')}</Box>
+			<Box marginBlockEnd={24}>{t('Discussion_description')}</Box>
 			<FieldGroup>
 				<Field>
 					<FieldLabel required>{t('Discussion_target_channel')}</FieldLabel>

diff --git a/apps/meteor/client/components/FilterByText.tsx b/apps/meteor/client/components/FilterByText.tsx
@@ -23,8 +23,8 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 	}, []);
 
 	return (
-		<Box mb={16} mi='neg-x4' is='form' onSubmit={handleFormSubmit} display='flex' flexWrap='wrap' alignItems='center'>
-			<Box mi={4} display='flex' flexGrow={1}>
+		<Box marginBlock={16} marginInline='neg-x4' is='form' onSubmit={handleFormSubmit} display='flex' flexWrap='wrap' alignItems='center'>
+			<Box marginInline={4} display='flex' flexGrow={1}>
 				<TextInput
 					{...props}
 					placeholder={placeholder ?? t('Search')}

diff --git a/apps/meteor/client/components/FingerprintChangeModal.tsx b/apps/meteor/client/components/FingerprintChangeModal.tsx
@@ -22,10 +22,10 @@ const FingerprintChangeModal = ({ onConfirm, onCancel, onClose }: FingerprintCha
 			confirmText={t('Configuration_update')}
 			cancelText={t('New_workspace')}
 		>
-			<Box is='p' mbe={16}>
+			<Box is='p' marginBlockEnd={16}>
 				<Trans i18nKey='Unique_ID_change_detected_description' />
 			</Box>
-			<Box is='p' mbe={16}>
+			<Box is='p' marginBlockEnd={16}>
 				<Trans
 					i18nKey='Unique_ID_change_detected_learn_more_link'
 					components={{ a: <ExternalLink to={links.go.fingerPrintChangedFaq} /> }}

diff --git a/apps/meteor/client/components/FingerprintChangeModalConfirmation.tsx b/apps/meteor/client/components/FingerprintChangeModalConfirmation.tsx
@@ -23,14 +23,14 @@ const FingerprintChangeModalConfirmation = ({ onConfirm, onCancel, onClose, newW
 			confirmText={newWorkspace ? t('Confirm_new_workspace') : t('Confirm_configuration_update')}
 			onClose={onClose}
 		>
-			<Box is='p' mbe={16}>
+			<Box is='p' marginBlockEnd={16}>
 				{newWorkspace ? (
 					<Trans i18nKey='Confirm_new_workspace_description' />
 				) : (
 					<Trans i18nKey='Confirm_configuration_update_description' />
 				)}
 			</Box>
-			<Box is='p' mbe={16}>
+			<Box is='p' marginBlockEnd={16}>
 				<Trans
 					i18nKey='Unique_ID_change_detected_learn_more_link'
 					components={{ a: <ExternalLink to={links.go.fingerPrintChangedFaq} /> }}

diff --git a/apps/meteor/client/components/GenericNoResults/GenericNoResults.stories.tsx b/apps/meteor/client/components/GenericNoResults/GenericNoResults.stories.tsx
@@ -16,7 +16,7 @@ export default {
 
 const filter = (
 	<>
-		<Box mb={16} is='form' display='flex' flexDirection='column'>
+		<Box marginBlock={16} is='form' display='flex' flexDirection='column'>
 			<TextInput flexShrink={0} placeholder='Search...' endAddon={<Icon name='magnifier' size='x20' />} />
 		</Box>
 	</>

diff --git a/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsage.tsx b/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsage.tsx
@@ -27,9 +27,9 @@ const GenericResourceUsage = ({
 	return (
 		<Box
 			title={tooltip}
-			w='x180'
-			h='x40'
-			mi={8}
+			width='x180'
+			height='x40'
+			marginInline={8}
 			fontScale='c1'
 			display='flex'
 			flexDirection='column'

diff --git a/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsageSkeleton.tsx b/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsageSkeleton.tsx
@@ -7,9 +7,18 @@ export type GenericResourceUsageSkeletonProps = {
 
 const GenericResourceUsageSkeleton = ({ title, ...props }: GenericResourceUsageSkeletonProps) => {
 	return (
-		<Box w='x180' h='x40' mi={8} fontScale='c1' display='flex' flexDirection='column' justifyContent='space-around' {...props}>
-			{title ? <Box color='default'>{title}</Box> : <Skeleton w='full' />}
-			<Skeleton w='full' />
+		<Box
+			width='x180'
+			height='x40'
+			marginInline={8}
+			fontScale='c1'
+			display='flex'
+			flexDirection='column'
+			justifyContent='space-around'
+			{...props}
+		>
+			{title ? <Box color='default'>{title}</Box> : <Skeleton width='full' />}
+			<Skeleton width='full' />
 		</Box>
 	);
 };

diff --git a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx
@@ -43,7 +43,7 @@ const GenericUpsellModal = ({
 				</Box>
 			)}
 			{description && (
-				<Box style={{ whiteSpace: 'break-spaces' }} fontScale='p2' mbs={16}>
+				<Box style={{ whiteSpace: 'break-spaces' }} fontScale='p2' marginBlockStart={16}>
 					{description}
 				</Box>
 			)}

diff --git a/apps/meteor/client/components/ListItem.stories.tsx b/apps/meteor/client/components/ListItem.stories.tsx
@@ -16,8 +16,8 @@ export default {
 
 export const ListWithIcon: StoryFn<typeof Tile> = () => {
 	return (
-		<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-			<Box flexShrink={1} pb={12}>
+		<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
+			<Box flexShrink={1} paddingBlock={12}>
 				<OptionTitle>Title</OptionTitle>
 				<ListItem text='Item 1' icon='info' />
 				<ListItem text='Item 2' icon='star' />
@@ -30,8 +30,8 @@ export const ListWithIcon: StoryFn<typeof Tile> = () => {
 
 export const NoIcon: StoryFn<typeof Tile> = () => {
 	return (
-		<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-			<Box flexShrink={1} pb={12}>
+		<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
+			<Box flexShrink={1} paddingBlock={12}>
 				<OptionTitle>Title</OptionTitle>
 				<ListItem text='Item 1' />
 				<ListItem text='Item 2' />
@@ -45,8 +45,8 @@ export const NoIcon: StoryFn<typeof Tile> = () => {
 export const MixedWithGap: StoryObj<typeof Tile> = {
 	render: () => {
 		return (
-			<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-				<Box flexShrink={1} pb={12}>
+			<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
+				<Box flexShrink={1} paddingBlock={12}>
 					<OptionTitle>Title</OptionTitle>
 					<ListItem text='Item 1' icon='hashtag' />
 					<ListItem text='Item 2' icon='team' />
@@ -70,8 +70,8 @@ export const MixedWithGap: StoryObj<typeof Tile> = {
 export const MixedWithoutGap: StoryObj<typeof Tile> = {
 	render: () => {
 		return (
-			<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-				<Box flexShrink={1} pb={12}>
+			<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
+				<Box flexShrink={1} paddingBlock={12}>
 					<OptionTitle>Title</OptionTitle>
 					<ListItem text='Item 1' icon='hashtag' />
 					<ListItem text='Item 2' icon='team' />

diff --git a/apps/meteor/client/components/ListSkeleton.tsx b/apps/meteor/client/components/ListSkeleton.tsx
@@ -16,11 +16,11 @@ const ListSkeleton = ({ listCount = 2 }: ListSkeletonProps) => {
 	return (
 		<Box display='flex' height='100%' justifyContent='flex-start' flexDirection='column'>
 			{widths.map((width, index) => (
-				<Box key={index} pi={24} pb={16} display='flex'>
+				<Box key={index} paddingInline={24} paddingBlock={16} display='flex'>
 					<Box>
 						<Skeleton variant='rect' width={36} height={36} />
 					</Box>
-					<Box mis={8} flexGrow={1}>
+					<Box marginInlineStart={8} flexGrow={1}>
 						<Skeleton width='100%' />
 						<Skeleton width={width} />
 					</Box>

diff --git a/apps/meteor/client/components/NotFoundState.tsx b/apps/meteor/client/components/NotFoundState.tsx
@@ -21,7 +21,7 @@ const NotFoundState = ({ title, subtitle }: NotFoundProps) => {
 				<StatesIcon name='magnifier' />
 				<StatesTitle>{title}</StatesTitle>
 				<StatesSubtitle>{subtitle}</StatesSubtitle>
-				<Box mbs={16}>
+				<Box marginBlockStart={16}>
 					<StatesActions>
 						<StatesAction onClick={handleGoHomeClick}>{t('Homepage')}</StatesAction>
 					</StatesActions>

diff --git a/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx b/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx
@@ -78,10 +78,10 @@ const RoomAutoComplete = forwardRef<HTMLInputElement, RoomAutoCompleteProps>(fun
 			setFilter={setFilter}
 			renderSelected={({ selected: { value, label } }) => (
 				<>
-					<Box margin='none' mi={2}>
+					<Box margin='none' marginInline={2}>
 						<RoomAvatar size={AVATAR_SIZE} room={{ ...label, type: label?.type || 'c', _id: value }} />
 					</Box>
-					<Box margin='none' mi={2}>
+					<Box margin='none' marginInline={2}>
 						{label?.name}
 					</Box>
 					{renderRoomIcon?.({ encrypted: label?.encrypted, type: label?.type })}

diff --git a/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx b/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx
@@ -53,7 +53,7 @@ const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoComplet
 			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
 				<Chip {...props} key={value} value={value} onClick={onRemove}>
 					<RoomAvatar size='x20' room={{ ...label, type: label?.type || 'c', _id: value }} />
-					<Box is='span' margin='none' mis={4}>
+					<Box is='span' margin='none' marginInlineStart={4}>
 						{label?.name}
 					</Box>
 				</Chip>

diff --git a/apps/meteor/client/components/Sidebar/Content.tsx b/apps/meteor/client/components/Sidebar/Content.tsx
@@ -7,7 +7,7 @@ export type ContentProps = ComponentPropsWithoutRef<typeof CustomScrollbars>;
 const Content = ({ children, ...props }: ContentProps) => (
 	<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} overflow='hidden'>
 		<CustomScrollbars {...props}>
-			<Box display='flex' flexDirection='column' w='full' h='full'>
+			<Box display='flex' flexDirection='column' width='full' height='full'>
 				{children}
 			</Box>
 		</CustomScrollbars>

diff --git a/apps/meteor/client/components/Sidebar/Header.tsx b/apps/meteor/client/components/Sidebar/Header.tsx
@@ -12,9 +12,9 @@ const Header = ({ title, onClose, children, ...props }: HeaderProps) => {
 	const { t } = useTranslation();
 
 	return (
-		<Box display='flex' flexDirection='column' pb={16} {...props}>
+		<Box display='flex' flexDirection='column' paddingBlock={16} {...props}>
 			{(title || onClose) && (
-				<Box display='flex' flexDirection='row' alignItems='center' pi={24} justifyContent='space-between' flexGrow={1}>
+				<Box display='flex' flexDirection='row' alignItems='center' paddingInline={24} justifyContent='space-between' flexGrow={1}>
 					{title && (
 						<Box color='default' fontScale='p2b' flexShrink={1} withTruncatedText>
 							{title}

diff --git a/apps/meteor/client/components/Sidebar/Sidebar.tsx b/apps/meteor/client/components/Sidebar/Sidebar.tsx
@@ -3,6 +3,8 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type SidebarProps = ComponentPropsWithoutRef<typeof FuselageSidebar>;
 
-const Sidebar = (props: SidebarProps) => <FuselageSidebar {...props} role='navigation' display='flex' flexDirection='column' h='full' />;
+const Sidebar = (props: SidebarProps) => (
+	<FuselageSidebar {...props} role='navigation' display='flex' flexDirection='column' height='full' />
+);
 
 export default Sidebar;
diff --git a/apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx b/apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx
@@ -19,7 +19,7 @@ const SidebarGenericItem = ({ href, active, externalUrl, children, ...props }: S
 		{...(externalUrl && { target: '_blank', rel: 'noopener noreferrer' })}
 		{...props}
 	>
-		<Box display='flex' flexDirection='row' alignItems='center' pb={8} width='100%'>
+		<Box display='flex' flexDirection='row' alignItems='center' paddingBlock={8} width='100%'>
 			{children}
 		</Box>
 	</SidebarItem>

diff --git a/apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx b/apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx
@@ -36,11 +36,11 @@ const SidebarNavigationItem = ({
 
 	return (
 		<SidebarGenericItem active={isActive} href={path} externalUrl={externalUrl} aria-current={isActive ? 'page' : undefined}>
-			{icon && <Icon name={icon} size='x20' mi={4} />}
+			{icon && <Icon name={icon} size='x20' marginInline={4} />}
 			<Box
 				withTruncatedText
 				fontScale='p2'
-				mi={4}
+				marginInline={4}
 				flexGrow={1}
 				display='flex'
 				alignItems='center'

diff --git a/apps/meteor/client/components/Skeleton.tsx b/apps/meteor/client/components/Skeleton.tsx
@@ -2,12 +2,12 @@ import { Box, Skeleton } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
 export const FormSkeleton = (props: ComponentProps<typeof Box>) => (
-	<Box w='full' pb={24} {...props}>
-		<Skeleton mbe={8} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={8} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={8} />
+	<Box width='full' paddingBlock={24} {...props}>
+		<Skeleton marginBlockEnd={8} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={8} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={8} />
 	</Box>
 );
diff --git a/apps/meteor/client/components/TextCopy.tsx b/apps/meteor/client/components/TextCopy.tsx
@@ -5,7 +5,15 @@ import { useTranslation } from 'react-i18next';
 import useClipboardWithToast from '../hooks/useClipboardWithToast';
 
 const defaultWrapperRenderer = (text: string) => (
-	<Box fontFamily='mono' alignSelf='center' fontScale='p2' style={{ wordBreak: 'break-all' }} mie={4} flexGrow={1} maxHeight='x108'>
+	<Box
+		fontFamily='mono'
+		alignSelf='center'
+		fontScale='p2'
+		style={{ wordBreak: 'break-all' }}
+		marginInlineEnd={4}
+		flexGrow={1}
+		maxHeight='x108'
+	>
 		{text}
 	</Box>
 );
@@ -31,7 +39,7 @@ const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopy
 			justifyContent='stretch'
 			alignItems='flex-start'
 			flexGrow={1}
-			pb={16}
+			paddingBlock={16}
 			backgroundColor='surface'
 			width='full'
 			{...props}

diff --git a/apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx b/apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx
@@ -122,7 +122,7 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, invalidAttempt, emailOrUserna
 					{errors.code && <FieldError>{errors.code.message}</FieldError>}
 				</Field>
 			</FieldGroup>
-			<Button display='flex' justifyContent='end' onClick={onClickResendCode} small mbs={24}>
+			<Button display='flex' justifyContent='end' onClick={onClickResendCode} small marginBlockStart={24}>
 				{t('Cloud_resend_email')}
 			</Button>
 		</GenericModal>

diff --git a/apps/meteor/client/components/UrlChangeModal.tsx b/apps/meteor/client/components/UrlChangeModal.tsx
@@ -16,7 +16,7 @@ const UrlChangeModal = ({ onConfirm, siteUrl, currentUrl, onClose }: UrlChangeMo
 		<GenericModal variant='warning' title={t('Warning')} onConfirm={onConfirm} onClose={onClose} onCancel={onClose} confirmText={t('Yes')}>
 			<Box
 				is='p'
-				mbe={16}
+				marginBlockEnd={16}
 				dangerouslySetInnerHTML={{
 					__html: DOMPurify.sanitize(
 						t('The_setting_s_is_configured_to_s_and_you_are_accessing_from_s', {

diff --git a/...eor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx b/...eor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx
@@ -81,9 +81,9 @@ const UserAndRoomAutoCompleteMultiple = ({ value, onChange, limit, ...props }: U
 			setFilter={setFilter}
 			multiple
 			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
-				<Chip {...props} height='x20' value={value} onClick={onRemove} mie={4}>
+				<Chip {...props} height='x20' value={value} onClick={onRemove} marginInlineEnd={4}>
 					<RoomAvatar size='x20' room={{ ...label, _id: value }} />
-					<Box is='span' margin='none' mis={4}>
+					<Box is='span' margin='none' marginInlineStart={4}>
 						{label.name}
 					</Box>
 				</Chip>

diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx
@@ -106,8 +106,8 @@ const UserAutoCompleteMultiple = forwardRef<HTMLInputElement, UserAutoCompleteMu
 
 						return (
 							<UserAvatarChip
-								mie={4}
-								mb={2}
+								marginInlineEnd={4}
+								marginBlock={2}
 								key={username}
 								federated={currentCachedOption._federated}
 								name={currentCachedOption.name}

diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx
@@ -14,7 +14,7 @@ const UserAvatarChip = ({ federated, username, name, ...props }: UserAvatarChipP
 	return (
 		<Chip height='x20' {...props}>
 			{federated ? <Icon size='x20' name='globe' verticalAlign='middle' /> : <UserAvatar size='x20' username={username} />}
-			<Box is='span' margin='none' mis={4} verticalAlign='middle'>
+			<Box is='span' margin='none' marginInlineStart={4} verticalAlign='middle'>
 				{displayName}
 			</Box>
 		</Chip>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,4 +3,4 @@ import type { ComponentProps } from 'react';

		export type BackdropProps = ComponentProps<typeof ModalBackdrop>;

		export const Backdrop = (props: BackdropProps) => <ModalBackdrop bg='transparent' {...props} />;
		export const Backdrop = (props: BackdropProps) => <ModalBackdrop backgroundColor='transparent' {...props} />;