@elementor/editor-editing-panel 1.45.0 → 1.47.0

package/src/components/style-sections/typography-section/text-color-field.tsx

@@ -1,22 +1,18 @@
 import * as React from 'react';
 import { ColorControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const TEXT_COLOR_LABEL = __( 'Text color', 'elementor' );
 
 export const TextColorField = () => {
 	return (
-		<StylesField bind="color">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Text color', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<ColorControl />
-				</Grid>
-			</Grid>
+		<StylesField bind="color" propDisplayName={ TEXT_COLOR_LABEL }>
+			<StylesFieldLayout label={ TEXT_COLOR_LABEL }>
+				<ColorControl />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/text-decoration-field.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { ToggleControl, type ToggleControlProps } from '@elementor/editor-controls';
 import { MinusIcon, OverlineIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Decoration = 'none' | 'underline' | 'line-through' | 'overline';
 
+const TEXT_DECORATION_LABEL = __( 'Line decoration', 'elementor' );
+
 const options: ToggleControlProps< Decoration >[ 'options' ] = [
 	{
 		value: 'none',
@@ -37,14 +38,9 @@ const options: ToggleControlProps< Decoration >[ 'options' ] = [
 	},
 ];
 export const TextDecorationField = () => (
-	<StylesField bind={ 'text-decoration' }>
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Line decoration', 'elementor' ) }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 } display="flex" justifyContent="end">
-				<ToggleControl options={ options } exclusive={ false } />
-			</Grid>
-		</Grid>
+	<StylesField bind="text-decoration" propDisplayName={ TEXT_DECORATION_LABEL }>
+		<StylesFieldLayout label={ TEXT_DECORATION_LABEL }>
+			<ToggleControl options={ options } exclusive={ false } />
+		</StylesFieldLayout>
 	</StylesField>
 );

package/src/components/style-sections/typography-section/text-direction-field.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Direction = 'ltr' | 'rtl';
 
+const TEXT_DIRECTION_LABEL = __( 'Direction', 'elementor' );
+
 const options: ToggleButtonGroupItem< Direction >[] = [
 	{
 		value: 'ltr',
@@ -26,15 +27,10 @@ const options: ToggleButtonGroupItem< Direction >[] = [
 
 export const TextDirectionField = () => {
 	return (
-		<StylesField bind={ 'direction' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } display="flex" justifyContent="end">
-					<ToggleControl options={ options } />
-				</Grid>
-			</Grid>
+		<StylesField bind="direction" propDisplayName={ TEXT_DIRECTION_LABEL }>
+			<StylesFieldLayout label={ TEXT_DIRECTION_LABEL }>
+				<ToggleControl options={ options } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/text-stroke-field.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { StrokeControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
@@ -25,28 +24,29 @@ const initTextStroke = {
 	},
 };
 
+const TEXT_STROKE_LABEL = __( 'Text stroke', 'elementor' );
+
 export const TextStrokeField = () => {
-	const { canEdit } = useStyle();
-	const [ textStroke, setTextStroke ] = useStylesField( 'stroke' );
+	const { value, setValue, canEdit } = useStylesField( 'stroke' );
 
 	const addTextStroke = () => {
-		setTextStroke( initTextStroke );
+		setValue( initTextStroke );
 	};
 
 	const removeTextStroke = () => {
-		setTextStroke( null );
+		setValue( null );
 	};
 
-	const hasTextStroke = Boolean( textStroke );
+	const hasTextStroke = Boolean( value );
 
 	return (
-		<StylesField bind={ 'stroke' }>
+		<StylesField bind={ 'stroke' } propDisplayName={ TEXT_STROKE_LABEL }>
 			<AddOrRemoveContent
 				isAdded={ hasTextStroke }
 				onAdd={ addTextStroke }
 				onRemove={ removeTextStroke }
 				disabled={ ! canEdit }
-				renderLabel={ () => <ControlLabel>{ __( 'Text stroke', 'elementor' ) }</ControlLabel> }
+				renderLabel={ () => <ControlLabel>{ TEXT_STROKE_LABEL }</ControlLabel> }
 			>
 				<StrokeControl />
 			</AddOrRemoveContent>

package/src/components/style-sections/typography-section/transform-field.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Transforms = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
 
+const TEXT_TRANSFORM_LABEL = __( 'Text transform', 'elementor' );
+
 const options: ToggleButtonGroupItem< Transforms >[] = [
 	{
 		value: 'none',
@@ -37,14 +38,9 @@ const options: ToggleButtonGroupItem< Transforms >[] = [
 ];
 
 export const TransformField = () => (
-	<StylesField bind={ 'text-transform' }>
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Text transform', 'elementor' ) }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 } display="flex" justifyContent="end">
-				<ToggleControl options={ options } />
-			</Grid>
-		</Grid>
+	<StylesField bind="text-transform" propDisplayName={ TEXT_TRANSFORM_LABEL }>
+		<StylesFieldLayout label={ TEXT_TRANSFORM_LABEL }>
+			<ToggleControl options={ options } />
+		</StylesFieldLayout>
 	</StylesField>
 );

package/src/components/style-sections/typography-section/typography-section.tsx

@@ -23,9 +23,11 @@ import { TransformField } from './transform-field';
 import { WordSpacingField } from './word-spacing-field';
 
 export const TypographySection = () => {
-	const [ columnCount ] = useStylesField< NumberPropValue >( 'column-count' );
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const { value: columnCount } = useStylesField< NumberPropValue >( 'column-count' );
 	const hasMultiColumns = !! ( columnCount?.value && columnCount?.value > 1 );
+
+	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
 	return (
 		<SectionContent>
 			<FontFamilyField />

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const WORD_SPACING_LABEL = __( 'Word spacing', 'elementor' );
 
 export const WordSpacingField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="word-spacing">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Word spacing', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeControl anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="word-spacing" propDisplayName={ WORD_SPACING_LABEL }>
+			<StylesFieldLayout label={ WORD_SPACING_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/styles-field-layout.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Grid, Stack, type Theme } from '@elementor/ui';
+
+import { ControlLabel } from './control-label';
+
+type StylesFieldLayoutProps = {
+	label: string;
+	children: React.ReactNode;
+	direction?: 'row' | 'column';
+};
+
+export const StylesFieldLayout = React.forwardRef< HTMLDivElement, StylesFieldLayoutProps >( ( props, ref ) => {
+	const { direction = 'row', children, label } = props;
+
+	const LayoutComponent = direction === 'row' ? Row : Column;
+
+	return <LayoutComponent label={ label } ref={ ref } children={ children } />;
+} );
+
+const Row = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
+	( { label, children }, ref ) => {
+		return (
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ ref }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid
+					item
+					xs={ 6 }
+					sx={ ( theme: Theme ) => ( {
+						width: `calc(50% - ${ theme.spacing( 2 ) })`,
+					} ) }
+				>
+					{ children }
+				</Grid>
+			</Grid>
+		);
+	}
+);
+
+const Column = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
+	( { label, children }, ref ) => {
+		return (
+			<Stack gap={ 0.75 } ref={ ref }>
+				<ControlLabel>{ label }</ControlLabel>
+				{ children }
+			</Stack>
+		);
+	}
+);

package/src/contexts/section-context.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { RefObject } from 'react';
+
+const FALLBACK_SECTION_WIDTH = 320;
+
+export const SectionRefContext = createContext< RefObject< HTMLElement > | null >( null );
+
+const useSectionRef = () => useContext( SectionRefContext );
+
+export const useSectionWidth = (): number => {
+	const sectionRef = useSectionRef();
+
+	return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
+};

package/src/controls-registry/control-type-container.tsx

@@ -3,6 +3,10 @@ import { type ControlLayout } from '@elementor/editor-elements';
 import { Box, type BoxProps, styled } from '@elementor/ui';
 
 export const ControlTypeContainer = ( { children, layout }: React.PropsWithChildren< { layout?: ControlLayout } > ) => {
+	if ( layout === 'custom' ) {
+		return children;
+	}
+
 	return <StyledContainer layout={ layout }>{ children }</StyledContainer>;
 };
 
@@ -14,10 +18,10 @@ const StyledContainer = styled( Box, {
 	...getGridLayout( layout ),
 } ) );
 
-const getGridLayout = ( layout: ControlLayout ) => ( {
+const getGridLayout = ( layout: Omit< ControlLayout, 'custom' > ) => ( {
 	justifyContent: 'space-between',
 	gridTemplateColumns: {
 		full: 'minmax(0, 1fr)',
 		'two-columns': 'repeat(2, minmax(0, 1fr))',
-	}[ layout ],
+	}[ layout as string ],
 } );

package/src/controls-registry/controls-registry.tsx

@@ -1,7 +1,9 @@
 import {
 	type ControlComponent,
 	ImageControl,
+	KeyValueControl,
 	LinkControl,
+	RepeatableControl,
 	SelectControl,
 	SizeControl,
 	SvgMediaControl,
@@ -11,19 +13,35 @@ import {
 	UrlControl,
 } from '@elementor/editor-controls';
 import { type ControlLayout } from '@elementor/editor-elements';
+import {
+	booleanPropTypeUtil,
+	imagePropTypeUtil,
+	imageSrcPropTypeUtil,
+	keyValuePropTypeUtil,
+	linkPropTypeUtil,
+	type PropTypeUtil,
+	sizePropTypeUtil,
+	stringPropTypeUtil,
+} from '@elementor/editor-props';
 
-type ControlRegistry = Record< string, { component: ControlComponent; layout: ControlLayout } >;
+type ControlRegistry = Record<
+	string,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	{ component: ControlComponent; layout: ControlLayout; propTypeUtil?: PropTypeUtil< string, any > }
+>;
 
 const controlTypes = {
-	image: { component: ImageControl, layout: 'full' },
-	'svg-media': { component: SvgMediaControl, layout: 'full' },
-	text: { component: TextControl, layout: 'full' },
-	textarea: { component: TextAreaControl, layout: 'full' },
-	size: { component: SizeControl, layout: 'two-columns' },
-	select: { component: SelectControl, layout: 'two-columns' },
-	link: { component: LinkControl, layout: 'full' },
-	url: { component: UrlControl, layout: 'full' },
-	switch: { component: SwitchControl, layout: 'two-columns' },
+	image: { component: ImageControl, layout: 'full', propTypeUtil: imagePropTypeUtil },
+	'svg-media': { component: SvgMediaControl, layout: 'full', propTypeUtil: imageSrcPropTypeUtil },
+	text: { component: TextControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	textarea: { component: TextAreaControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	size: { component: SizeControl, layout: 'two-columns', propTypeUtil: sizePropTypeUtil },
+	select: { component: SelectControl, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
+	link: { component: LinkControl, layout: 'custom', propTypeUtil: linkPropTypeUtil },
+	url: { component: UrlControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	switch: { component: SwitchControl, layout: 'two-columns', propTypeUtil: booleanPropTypeUtil },
+	repeatable: { component: RepeatableControl, layout: 'full', propTypeUtil: undefined },
+	'key-value': { component: KeyValueControl, layout: 'full', propTypeUtil: keyValuePropTypeUtil },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;
@@ -35,3 +53,5 @@ export type ControlTypes = {
 export const getControl = ( type: ControlType ) => controlTypes[ type ]?.component;
 
 export const getDefaultLayout = ( type: ControlType ) => controlTypes[ type ].layout;
+
+export const getPropTypeUtil = ( type: ControlType ) => controlTypes[ type ]?.propTypeUtil;

package/src/controls-registry/settings-field.tsx

@@ -1,17 +1,29 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
-import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import {
+	type ElementID,
+	getElementLabel,
+	getElementSetting,
+	updateElementSettings,
+	useElementSetting,
+} from '@elementor/editor-elements';
 import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { createTopLevelOjectType } from './create-top-level-object-type';
 
 type Props = {
 	bind: PropKey;
+	propDisplayName: string;
 	children: React.ReactNode;
 };
 
-export const SettingsField = ( { bind, children }: Props ) => {
+export const SettingsField = ( { bind, children, propDisplayName }: Props ) => {
 	const { element, elementType } = useElement();
 
 	const settingsValue = useElementSetting< PropValue >( element.id, bind );
@@ -20,11 +32,20 @@ export const SettingsField = ( { bind, children }: Props ) => {
 
 	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
 
+	const undoableUpdateElementProp = useUndoableUpdateElementProp( {
+		propKey: bind,
+		elementId: element.id,
+		propDisplayName,
+	} );
+
 	const setValue = ( newValue: Record< string, PropValue > ) => {
-		updateElementSettings( {
-			id: element.id,
-			props: { ...newValue },
-		} );
+		const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+
+		if ( isVersion331Active ) {
+			undoableUpdateElementProp( { newValue } );
+		} else {
+			updateElementSettings( { id: element.id, props: newValue } );
+		}
 	};
 
 	return (
@@ -33,3 +54,41 @@ export const SettingsField = ( { bind, children }: Props ) => {
 		</PropProvider>
 	);
 };
+
+type UndoableUpdateElementSettingsArgs = {
+	newValue: Record< string, PropValue >;
+};
+
+function useUndoableUpdateElementProp( {
+	propKey,
+	elementId,
+	propDisplayName,
+}: {
+	propKey: PropKey;
+	elementId: ElementID;
+	propDisplayName: string;
+} ) {
+	return useMemo( () => {
+		return undoable(
+			{
+				do: ( { newValue }: UndoableUpdateElementSettingsArgs ) => {
+					const prevPropValue = getElementSetting( elementId, propKey ) as PropValue;
+
+					updateElementSettings( { id: elementId, props: { ...newValue }, withHistory: false } );
+					setDocumentModifiedStatus( true );
+
+					return { [ propKey ]: prevPropValue };
+				},
+
+				undo: ( {}, prevProps ) => {
+					updateElementSettings( { id: elementId, props: prevProps, withHistory: false } );
+				},
+			},
+			{
+				title: getElementLabel( elementId ),
+				// translators: %s is the name of the property that was edited.
+				subtitle: __( '%s edited', 'elementor' ).replace( '%s', propDisplayName ),
+			}
+		);
+	}, [ propKey, elementId, propDisplayName ] );
+}

package/src/controls-registry/styles-field.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { ControlAdornmentsProvider, PropKeyProvider, PropProvider } from '@elementor/editor-controls';
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 
-import { useStyle } from '../contexts/style-context';
+import { useStylesInheritanceChain } from '../contexts/styles-inheritance-context';
 import { useStylesField } from '../hooks/use-styles-field';
 import { StylesInheritanceIndicator } from '../styles-inheritance/components/styles-inheritance-indicator';
 import { createTopLevelOjectType } from './create-top-level-object-type';
@@ -12,19 +13,24 @@ export type StylesFieldProps = {
 	bind: PropKey;
 	placeholder?: PropValue;
 	children: React.ReactNode;
+	propDisplayName: string;
 };
 
 export const StylesField = ( { bind, placeholder, children }: StylesFieldProps ) => {
-	const [ value, setValue ] = useStylesField( bind );
-	const { canEdit } = useStyle();
+	const { value, setValue, canEdit } = useStylesField( bind );
+
+	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
+	const stylesInheritanceChain = useStylesInheritanceChain( [ bind ] );
 
 	const stylesSchema = getStylesSchema();
 
 	const propType = createTopLevelOjectType( { schema: stylesSchema } );
 
 	const values = { [ bind ]: value };
-	const placeholderValues = { [ bind ]: placeholder };
-
+	const [ actualValue ] = stylesInheritanceChain;
+	const placeholderValues = {
+		[ bind ]: isVersion331Active ? actualValue?.value : placeholder,
+	};
 	const setValues = ( newValue: Record< string, PropValue > ) => {
 		setValue( newValue[ bind ] );
 	};

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
-import { PopoverHeader } from '@elementor/editor-ui';
+import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -10,7 +10,6 @@ import {
 	Divider,
 	Grid,
 	IconButton,
-	Paper,
 	Popover,
 	Stack,
 	Tab,
@@ -22,7 +21,6 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PopoverContent } from '../../components/popover-content';
 import { Control as BaseControl } from '../../controls-registry/control';
 import { type ControlType, getControl } from '../../controls-registry/controls-registry';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
@@ -77,16 +75,15 @@ export const DynamicSelectionControl = () => {
 			<Popover
 				disablePortal
 				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				PaperProps={ {
+					sx: { my: 1 },
+				} }
 				{ ...bindPopover( selectionPopoverState ) }
 			>
 				<Stack>
-					<PopoverHeader
-						title={ __( 'Dynamic tags', 'elementor' ) }
-						onClose={ selectionPopoverState.close }
-						icon={ <DatabaseIcon fontSize={ SIZE } /> }
-					/>
-					<DynamicSelection onSelect={ selectionPopoverState.close } />
+					<DynamicSelection close={ selectionPopoverState.close } />
 				</Stack>
 			</Popover>
 		</Box>
@@ -111,16 +108,17 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 				disablePortal
 				disableScrollLock
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+				PaperProps={ {
+					sx: { my: 0.5 },
+				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<Paper component={ Stack } sx={ { minHeight: '300px', width: '220px' } }>
-					<PopoverHeader
-						title={ dynamicTag.label }
-						onClose={ popupState.close }
-						icon={ <DatabaseIcon fontSize={ SIZE } /> }
-					/>
-					<DynamicSettings controls={ dynamicTag.atomic_controls } />
-				</Paper>
+				<PopoverHeader
+					title={ dynamicTag.label }
+					onClose={ popupState.close }
+					icon={ <DatabaseIcon fontSize={ SIZE } /> }
+				/>
+				<DynamicSettings controls={ dynamicTag.atomic_controls } />
 			</Popover>
 		</>
 	);
@@ -136,7 +134,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 	}
 
 	return (
-		<>
+		<PopoverScrollableContent>
 			<Tabs size="small" variant="fullWidth" { ...getTabsProps() }>
 				{ tabs.map( ( { value }, index ) => (
 					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
@@ -147,18 +145,18 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 			{ tabs.map( ( { value }, index ) => {
 				return (
 					<TabPanel key={ index } sx={ { flexGrow: 1, py: 0 } } { ...getTabPanelProps( index ) }>
-						<PopoverContent p={ 2 } gap={ 2 }>
+						<Stack p={ 2 } gap={ 2 }>
 							{ value.items.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
 								}
 								return null;
 							} ) }
-						</PopoverContent>
+						</Stack>
 					</TabPanel>
 				);
 			} ) }
-		</>
+		</PopoverScrollableContent>
 	);
 };