@elementor/editor-controls 4.4.0-1120 → 4.4.0-1121

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.4.0-1120",
+  "version": "4.4.0-1121",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1120",
-    "@elementor/editor-elements": "4.4.0-1120",
-    "@elementor/editor-props": "4.4.0-1120",
-    "@elementor/editor-responsive": "4.4.0-1120",
-    "@elementor/editor-ui": "4.4.0-1120",
-    "@elementor/editor-v1-adapters": "4.4.0-1120",
-    "@elementor/env": "4.4.0-1120",
-    "@elementor/events": "4.4.0-1120",
-    "@elementor/http-client": "4.4.0-1120",
+    "@elementor/editor-current-user": "4.4.0-1121",
+    "@elementor/editor-elements": "4.4.0-1121",
+    "@elementor/editor-props": "4.4.0-1121",
+    "@elementor/editor-responsive": "4.4.0-1121",
+    "@elementor/editor-ui": "4.4.0-1121",
+    "@elementor/editor-v1-adapters": "4.4.0-1121",
+    "@elementor/env": "4.4.0-1121",
+    "@elementor/events": "4.4.0-1121",
+    "@elementor/http-client": "4.4.0-1121",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.4.0-1120",
-    "@elementor/query": "4.4.0-1120",
-    "@elementor/schema": "4.4.0-1120",
-    "@elementor/session": "4.4.0-1120",
+    "@elementor/locations": "4.4.0-1121",
+    "@elementor/query": "4.4.0-1121",
+    "@elementor/schema": "4.4.0-1121",
+    "@elementor/session": "4.4.0-1121",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1120",
-    "@elementor/wp-media": "4.4.0-1120",
+    "@elementor/utils": "4.4.0-1121",
+    "@elementor/wp-media": "4.4.0-1121",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

package/src/controls/icon-library/icon-library-filter.tsx

@@ -1,6 +1,14 @@
 import * as React from 'react';
 import { useId } from 'react';
-import { CheckIcon, FilterIcon, LibraryIcon, ListIcon, StarFilledIcon, StarIcon } from '@elementor/icons';
+import {
+	CheckIcon,
+	FilterIcon,
+	LibraryIcon,
+	MenuIcon,
+	RosetteDiscountCheckIcon,
+	StarFilledIcon,
+	StarIcon,
+} from '@elementor/icons';
 import {
 	bindMenu,
 	bindToggle,
@@ -22,23 +30,24 @@ import { ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY } from './icon-library-tooltip'
 
 const FILTER_MENU_WIDTH = 280;
 const FILTER_INDICATOR_SIZE = 6;
-const FILTER_INDICATOR_OFFSET = 4;
+const FILTER_INDICATOR_CORNER_OFFSET = -( FILTER_INDICATOR_SIZE / 2 );
 const FILTER_TYPE_ALL = 'all';
 const FILTER_TYPE_GROUP = 'group';
 const FILTER_TYPE_ITEM = 'item';
 
-const FILTER_ICONS: Record< string, typeof ListIcon > = {
-	list: ListIcon,
+const FILTER_ICONS: Record< string, typeof MenuIcon > = {
+	list: MenuIcon,
 	star: StarIcon,
 	'star-filled': StarFilledIcon,
 	library: LibraryIcon,
+	rosette: RosetteDiscountCheckIcon,
 };
 
 const DEFAULT_FILTER = [
 	{ type: FILTER_TYPE_ALL, label: 'All icons', icon: 'list' },
 	{ type: FILTER_TYPE_ITEM, value: 'fa-regular', label: 'Font Awesome - Regular', icon: 'star' },
 	{ type: FILTER_TYPE_ITEM, value: 'fa-solid', label: 'Font Awesome - Solid', icon: 'star-filled' },
-	{ type: FILTER_TYPE_ITEM, value: 'fa-brands', label: 'Font Awesome - Brands', icon: 'library' },
+	{ type: FILTER_TYPE_ITEM, value: 'fa-brands', label: 'Font Awesome - Brands', icon: 'rosette' },
 ] as const;
 
 type FilterEntry =
@@ -86,7 +95,7 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 					value="filter"
 					size="tiny"
 					selected={ popupState.isOpen }
-					sx={ { position: 'relative', flexShrink: 0 } }
+					sx={ { position: 'relative', flexShrink: 0, overflow: 'visible' } }
 					{ ...bindToggle( popupState ) }
 					aria-expanded={ popupState.isOpen }
 				>
@@ -97,12 +106,12 @@ export const IconLibraryFilter = ( { value, onChange }: IconLibraryFilterProps )
 							aria-hidden="true"
 							sx={ {
 								position: 'absolute',
-								insetBlockStart: FILTER_INDICATOR_OFFSET,
-								insetInlineEnd: FILTER_INDICATOR_OFFSET,
+								insetBlockStart: FILTER_INDICATOR_CORNER_OFFSET,
+								insetInlineEnd: FILTER_INDICATOR_CORNER_OFFSET,
 								width: FILTER_INDICATOR_SIZE,
 								height: FILTER_INDICATOR_SIZE,
 								borderRadius: '50%',
-								bgcolor: 'secondary.main',
+								bgcolor: 'text.primary',
 							} }
 						/>
 					) : null }
@@ -173,7 +182,7 @@ const renderFilterEntry = (
 
 const getFilterIcon = ( icon?: string ) => FILTER_ICONS[ icon ?? '' ] ?? LibraryIcon;
 
-const renderFilterMenuItemContent = ( label: string, Icon: typeof ListIcon, selected: boolean ) => (
+const renderFilterMenuItemContent = ( label: string, Icon: typeof MenuIcon, selected: boolean ) => (
 	<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
 		<Icon fontSize="tiny" />
 		<Typography variant="caption" sx={ { flex: 1 } }>

package/src/controls/icon-library/icon-library-grid.tsx

@@ -13,8 +13,9 @@ export const ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1000;
 
 const ICON_GLYPH_SIZE = 20;
 const GRID_OVERSCAN = 6;
-const GRID_COLUMN_GAP = 1;
-const GRID_HORIZONTAL_PADDING = 1;
+const GRID_CELL_GAP = 1;
+const GRID_HORIZONTAL_PADDING = 2;
+const GRID_VERTICAL_PADDING = 1.5;
 const HOME_END_KEYS = new Set( [ 'Home', 'End' ] );
 
 const getGridMetrics = ( containerWidth: number, columnGap: number, inlinePadding: number ) => {
@@ -67,10 +68,15 @@ export const IconLibraryGrid = ( {
 	const [ focusedIndex, setFocusedIndex ] = useState( selectedIndex >= 0 ? selectedIndex : 0 );
 	const [ { columnCount, cellSize }, setGridMetrics ] = useState( () => getGridMetrics( 0, 0, 0 ) );
 	const rowCount = Math.ceil( items.length / columnCount );
+	const cellGap = Number.parseFloat( theme.spacing( GRID_CELL_GAP ) );
+	const verticalPadding = Number.parseFloat( theme.spacing( GRID_VERTICAL_PADDING ) );
 	const virtualizer = useVirtualizer( {
 		count: rowCount,
 		getScrollElement: () => containerRef.current,
 		estimateSize: () => cellSize,
+		gap: cellGap,
+		paddingStart: verticalPadding,
+		paddingEnd: verticalPadding,
 		overscan: GRID_OVERSCAN,
 	} );
 	const focusedItem = items[ focusedIndex ];
@@ -90,10 +96,11 @@ export const IconLibraryGrid = ( {
 		} );
 
 		if ( selectedIndex >= 0 ) {
-			virtualizer.scrollToIndex( Math.floor( selectedIndex / columnCount ) );
+			virtualizer.measure();
+			virtualizer.scrollToIndex( Math.floor( selectedIndex / columnCount ), { align: 'center' } );
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ columnCount, items, selectedIndex, selectedValue ] );
+	}, [ cellSize, columnCount, items, selectedIndex, selectedValue ] );
 
 	useLayoutEffect( () => {
 		if ( ! shouldRestoreFocusRef.current || ! focusedItem ) {
@@ -118,9 +125,8 @@ export const IconLibraryGrid = ( {
 		}
 
 		const measureGrid = () => {
-			const columnGap = Number.parseFloat( theme.spacing( GRID_COLUMN_GAP ) );
 			const inlinePadding = Number.parseFloat( theme.spacing( GRID_HORIZONTAL_PADDING ) ) * 2;
-			setGridMetrics( getGridMetrics( container.clientWidth, columnGap, inlinePadding ) );
+			setGridMetrics( getGridMetrics( container.clientWidth, cellGap, inlinePadding ) );
 		};
 
 		measureGrid();
@@ -130,7 +136,7 @@ export const IconLibraryGrid = ( {
 		return () => {
 			resizeObserver.disconnect();
 		};
-	}, [ theme, items.length ] );
+	}, [ theme, cellGap, items.length ] );
 
 	useLayoutEffect( () => {
 		virtualizer.measure();
@@ -242,7 +248,7 @@ export const IconLibraryGrid = ( {
 									transform: `translateY(${ virtualRow.start }px)`,
 									display: 'grid',
 									gridTemplateColumns: `repeat(${ columnCount }, minmax(0, 1fr))`,
-									gap: GRID_COLUMN_GAP,
+									gap: GRID_CELL_GAP,
 									px: GRID_HORIZONTAL_PADDING,
 									boxSizing: 'border-box',
 								} }

package/src/controls/icon-library/icon-library-popover.tsx

@@ -8,7 +8,7 @@ import {
 	StyledMenuList,
 	type VirtualizedItem,
 } from '@elementor/editor-ui';
-import { ComponentsIcon } from '@elementor/icons';
+import { LibraryIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
 import { Box, CircularProgress, Divider, Link, Stack, styled, Typography } from '@elementor/ui';
 import { useDebounceState } from '@elementor/utils';
@@ -26,25 +26,30 @@ import { FontAwesomeGlyph } from './font-awesome-glyph';
 import { IconLibraryFilter } from './icon-library-filter';
 import { IconLibraryGrid } from './icon-library-grid';
 import { type IconLibraryView, IconLibraryViewToggle } from './icon-library-view-toggle';
+import { SvgElementIcon } from './svg-element-icon';
 import { useFontAwesome7Catalog } from './use-font-awesome-7-catalog';
 
 export const ICON_LIBRARY_POPOVER_WIDTH = 300;
-export const ICON_LIBRARY_ROW_HEIGHT = 48;
 export const ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
 export const ICON_LIBRARY_VIEW_STORAGE_KEY = 'icon-library-view';
 export const ICON_LIBRARY_VIEW_STORAGE_PREFIX = 'editor-controls';
-const DEFAULT_ICON_LIBRARY_VIEW: IconLibraryView = 'list';
+const DEFAULT_ICON_LIBRARY_VIEW: IconLibraryView = 'grid';
 
 const isIconLibraryView = ( value: unknown ): value is IconLibraryView => {
 	return value === 'grid' || value === 'list';
 };
 const ICON_TILE_SIZE = 40;
+const ICON_LIBRARY_ROW_VERTICAL_PADDING = 0.5;
+const ICON_LIBRARY_ROW_VERTICAL_PADDING_PX = 4;
+export const ICON_LIBRARY_ROW_HEIGHT = ICON_TILE_SIZE + ICON_LIBRARY_ROW_VERTICAL_PADDING_PX * 2;
 const ICON_GLYPH_SIZE = 20;
-const ICON_LIBRARY_INLINE_SPACING = 1;
+const ICON_LIBRARY_INLINE_SPACING = 2;
+const ICON_LIBRARY_SEARCH_PADDING_BOTTOM = 2;
+const ICON_LIBRARY_TITLE_SIZE = '14px';
 
 const CompactIconLibraryMenuList = styled( StyledMenuList )( ( { theme } ) => ( {
 	'& > [role="option"]': {
-		padding: theme.spacing( 0.75, ICON_LIBRARY_INLINE_SPACING ),
+		padding: theme.spacing( ICON_LIBRARY_ROW_VERTICAL_PADDING, ICON_LIBRARY_INLINE_SPACING ),
 	},
 } ) );
 
@@ -121,11 +126,20 @@ export const IconLibraryPopover = ( {
 			<PopoverHeader
 				title={ __( 'Icon library', 'elementor' ) }
 				onClose={ handleClose }
-				icon={ <ComponentsIcon fontSize="tiny" /> }
+				icon={ <LibraryIcon fontSize="tiny" /> }
 				actions={ [ <IconLibraryViewToggle key="view" value={ view } onChange={ setStoredView } /> ] }
-				sx={ { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 } }
+				sx={ {
+					pl: ICON_LIBRARY_INLINE_SPACING,
+					pr: 1,
+					'& .MuiTypography-subtitle2': { fontSize: ICON_LIBRARY_TITLE_SIZE },
+				} }
 			/>
-			<Stack direction="row" alignItems="center" gap={ 1 } sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }>
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={ 1 }
+				sx={ { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM } }
+			>
 				<SearchField
 					value={ searchInputValue }
 					onSearch={ handleSearchChange }
@@ -269,7 +283,7 @@ const IconLibraryRow = ( item: VirtualizedItem< string, string > ) => {
 
 const CatalogUnavailable = () => (
 	<Stack alignItems="center" justifyContent="center" height="100%" p={ 2.5 } gap={ 1.5 }>
-		<ComponentsIcon fontSize="large" />
+		<SvgElementIcon fontSize="large" />
 		<Typography align="center" variant="subtitle2" color="text.secondary">
 			{ __( "Icons couldn't be loaded.", 'elementor' ) }
 		</Typography>
@@ -278,7 +292,7 @@ const CatalogUnavailable = () => (
 
 const NoResults = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => (
 	<Stack alignItems="center" justifyContent="center" height="100%" p={ 2.5 } gap={ 1.5 }>
-		<ComponentsIcon fontSize="large" />
+		<SvgElementIcon fontSize="large" />
 		<Typography align="center" variant="subtitle2" color="text.secondary">
 			{ __( 'Sorry, nothing matched', 'elementor' ) }
 		</Typography>

package/src/controls/icon-library/icon-library-view-toggle.tsx

@@ -1,24 +1,13 @@
 import * as React from 'react';
-import { useId } from 'react';
-import { CheckIcon, ListIcon, WidgetsIcon } from '@elementor/icons';
-import {
-	bindMenu,
-	bindToggle,
-	Menu,
-	MenuItem,
-	Stack,
-	ToggleButton,
-	Tooltip,
-	Typography,
-	usePopupState,
-} from '@elementor/ui';
+import { ListIcon, WidgetsIcon } from '@elementor/icons';
+import { IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY } from './icon-library-tooltip';
 
 export type IconLibraryView = 'grid' | 'list';
 
-const VIEW_MENU_WIDTH = 122;
+const HEADER_ACTION_GAP = 0.5;
 
 type IconLibraryViewToggleProps = {
 	value: IconLibraryView;
@@ -26,79 +15,30 @@ type IconLibraryViewToggleProps = {
 };
 
 export const IconLibraryViewToggle = ( { value, onChange }: IconLibraryViewToggleProps ) => {
-	const popupId = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId,
-	} );
 	const isGrid = value === 'grid';
+	const nextView: IconLibraryView = isGrid ? 'list' : 'grid';
 	const ViewIcon = isGrid ? WidgetsIcon : ListIcon;
 	const viewButtonLabel = isGrid ? __( 'Grid view', 'elementor' ) : __( 'List view', 'elementor' );
+	const viewButtonAction = isGrid
+		? __( 'Switch to list view', 'elementor' )
+		: __( 'Switch to grid view', 'elementor' );
 
 	return (
-		<>
-			<Tooltip
-				title={ viewButtonLabel }
-				placement="top"
-				enterDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
-				enterNextDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
-				disableInteractive
+		<Tooltip
+			title={ viewButtonLabel }
+			placement="top"
+			enterDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+			enterNextDelay={ ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY }
+			disableInteractive
+		>
+			<IconButton
+				aria-label={ viewButtonAction }
+				size="tiny"
+				onClick={ () => onChange( nextView ) }
+				sx={ { flexShrink: 0, mr: HEADER_ACTION_GAP } }
 			>
-				<ToggleButton
-					aria-label={ viewButtonLabel }
-					value="view"
-					size="tiny"
-					selected={ popupState.isOpen }
-					sx={ { flexShrink: 0 } }
-					{ ...bindToggle( popupState ) }
-					aria-expanded={ popupState.isOpen }
-				>
-					<ViewIcon fontSize="tiny" />
-				</ToggleButton>
-			</Tooltip>
-			<Menu
-				{ ...bindMenu( popupState ) }
-				MenuListProps={ {
-					dense: true,
-					autoFocusItem: true,
-					'aria-label': __( 'View', 'elementor' ),
-				} }
-				sx={ { '& .MuiPaper-root': { minWidth: VIEW_MENU_WIDTH } } }
-			>
-				<ViewMenuItem
-					label={ __( 'List', 'elementor' ) }
-					selected={ value === 'list' }
-					onClick={ () => {
-						onChange( 'list' );
-						popupState.close();
-					} }
-				/>
-				<ViewMenuItem
-					label={ __( 'Grid', 'elementor' ) }
-					selected={ value === 'grid' }
-					onClick={ () => {
-						onChange( 'grid' );
-						popupState.close();
-					} }
-				/>
-			</Menu>
-		</>
+				<ViewIcon fontSize="tiny" />
+			</IconButton>
+		</Tooltip>
 	);
 };
-
-type ViewMenuItemProps = {
-	label: string;
-	selected: boolean;
-	onClick: () => void;
-};
-
-const ViewMenuItem = ( { label, selected, onClick }: ViewMenuItemProps ) => (
-	<MenuItem role="menuitemradio" aria-checked={ selected } selected={ selected } onClick={ onClick }>
-		<Stack direction="row" alignItems="center" gap={ 1 } width="100%">
-			<Typography variant="caption" sx={ { flex: 1 } }>
-				{ label }
-			</Typography>
-			{ selected ? <CheckIcon fontSize="tiny" aria-hidden="true" /> : null }
-		</Stack>
-	</MenuItem>
-);

package/src/controls/icon-library/svg-element-icon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SvgIcon } from '@elementor/ui';
+
+const SVG_ELEMENT_ICON_PATH =
+	'M502 772c10 0 19-6 24-14l201-351c4-9 4-19 0-27-5-9-14-14-24-14h-401c-10 0-19 5-24 14-4 8-5 18 0 27l201 351c5 8 14 14 23 14z m0-82l-154-270h309l-154 270z m-323-471c-6 0-12-2-16-7-4-4-7-10-7-16v-201c0-6 3-12 7-16 4-5 10-7 16-7h201c6 0 12 2 16 7 5 4 7 10 7 16v201c0 6-2 12-7 16-4 5-10 7-16 7h-201z m-54 32c14 14 34 22 54 22h201c20 0 40-8 55-22 14-15 22-35 22-55v-201c0-20-8-40-22-54-15-15-35-23-55-23h-201c-20 0-40 8-54 23-15 14-23 34-23 54v201c0 20 8 40 23 55z m480-30c34 33 79 52 126 52s92-19 125-52c34-33 52-78 52-125s-18-93-52-126c-33-33-78-52-125-52s-92 19-126 52c-33 33-52 78-52 126s19 92 52 125z m126-2c-33 0-64-13-87-36-24-23-37-55-37-87s13-65 37-88c23-23 54-36 87-36s64 13 87 36c23 23 36 55 36 88s-13 64-36 87c-23 23-54 36-87 36z';
+
+export const SvgElementIcon = React.forwardRef< SVGSVGElement, React.ComponentProps< typeof SvgIcon > >(
+	( props, ref ) => (
+		<SvgIcon viewBox="0 0 1000 1000" { ...props } ref={ ref }>
+			<g transform="translate(0, 850) scale(1, -1)">
+				<path d={ SVG_ELEMENT_ICON_PATH } />
+			</g>
+		</SvgIcon>
+	)
+);

package/src/controls/svg-media-overlay.tsx

@@ -8,28 +8,35 @@ import { ConditionalControlInfotip } from '../components/conditional-control-inf
 export const SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = 'svg-media-control-container';
 export const SVG_MEDIA_ACTION_GROUP_TEST_ID = 'svg-media-action-group';
 
-const MEDIA_ACTION_PADDING_Y = 0.75;
-const MEDIA_ACTION_PADDING_X = 2;
+const SELECT_AREA_WIDTH = 72;
+const UPLOAD_AREA_WIDTH = 48;
+const SPLIT_BUTTON_MIN_HEIGHT = 32;
+const SPLIT_BUTTON_CORNER_RADIUS = '8px';
+const SPLIT_BUTTON_FONT_SIZE = '14px';
 const ICON_LIBRARY_PADDING = 0.625;
 
 const svgButtonSx = {
-	px: MEDIA_ACTION_PADDING_X,
-	py: MEDIA_ACTION_PADDING_Y,
+	minWidth: 0,
+	minHeight: SPLIT_BUTTON_MIN_HEIGHT,
+	px: 2,
+	fontSize: SPLIT_BUTTON_FONT_SIZE,
+	fontWeight: 500,
+	lineHeight: 1,
 };
 
-const MediaActionGroup = styled( Stack )( ( { theme } ) => ( {
+const MediaActionGroup = styled( Stack )( {
 	display: 'inline-flex',
 	flexDirection: 'row',
 	alignItems: 'stretch',
 	border: '1px solid currentColor',
-	borderRadius: theme.shape.borderRadius,
+	borderRadius: SPLIT_BUTTON_CORNER_RADIUS,
 	overflow: 'hidden',
 	'& .MuiButton-root': {
 		border: 'none',
 		borderRadius: 0,
 		lineHeight: 1,
 	},
-} ) );
+} );
 
 type SvgMediaOverlayProps = {
 	isAdmin: boolean;
@@ -60,7 +67,7 @@ export const SvgMediaOverlay = ( {
 				variant="text"
 				onClick={ onSelectSvg }
 				aria-label={ __( 'Select', 'elementor' ) }
-				sx={ svgButtonSx }
+				sx={ { ...svgButtonSx, minWidth: SELECT_AREA_WIDTH } }
 			>
 				{ __( 'Select', 'elementor' ) }
 			</Button>
@@ -77,7 +84,7 @@ export const SvgMediaOverlay = ( {
 				description={ infotipDescription }
 				isEnabled={ ! isAdmin }
 			>
-				<Box component="span" sx={ { display: 'inline-flex' } }>
+				<Box component="span" sx={ { display: 'flex', width: UPLOAD_AREA_WIDTH } }>
 					<UploadControl isAdmin={ isAdmin } onUpload={ onUpload } />
 				</Box>
 			</ConditionalControlInfotip>
@@ -124,7 +131,7 @@ const UploadButton = ( {
 	onClick?: () => void;
 } ) => (
 	<Button
-		sx={ sx }
+		sx={ { ...sx, width: '100%' } }
 		size="tiny"
 		color="inherit"
 		variant="text"
@@ -132,6 +139,6 @@ const UploadButton = ( {
 		onClick={ onClick }
 		aria-label={ __( 'Upload', 'elementor' ) }
 	>
-		<UploadIcon />
+		<UploadIcon fontSize="small" />
 	</Button>
 );