diff --git a/packages/js/email-editor/src/components/personalization-tags/index.scss b/packages/js/email-editor/src/components/personalization-tags/index.scss index 308571dae5..0edd0ff0e8 100644 --- a/packages/js/email-editor/src/components/personalization-tags/index.scss +++ b/packages/js/email-editor/src/components/personalization-tags/index.scss @@ -82,6 +82,7 @@ width: 400px; } .mailpoet-personalization-tag-popover__content-button { + padding-top: 10px; text-align: center; } } diff --git a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-popover.tsx b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-popover.tsx index 6220708910..8bff597284 100644 --- a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-popover.tsx +++ b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-popover.tsx @@ -19,9 +19,7 @@ const PersonalizationTagsPopover = ( { onUpdate, }: PersonalizationTagsPopoverProps ) => { const [ isPopoverVisible, setIsPopoverVisible ] = useState( false ); - const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >( - null - ); + const [ anchor, setAnchor ] = useState< HTMLElement | null >( null ); const [ updatedValue, setUpdatedValue ] = useState( '' ); const [ originalValue, setOriginalValue ] = useState( '' ); @@ -47,7 +45,7 @@ const PersonalizationTagsPopover = ( { ); setOriginalValue( textContent ); setUpdatedValue( textContent ); - setPopoverAnchor( commentSpan ); + setAnchor( commentSpan ); setIsPopoverVisible( true ); } }; @@ -63,11 +61,11 @@ const PersonalizationTagsPopover = ( { return ( <> - { isPopoverVisible && ( + { isPopoverVisible && anchor && ( setIsPopoverVisible( false ) } - anchorRef={ popoverAnchor } + anchor={ anchor } // Directly use commentSpan as the anchor className="mailpoet-personalization-tag-popover" >
@@ -75,6 +73,7 @@ const PersonalizationTagsPopover = ( { label={ __( 'Personalization Tag', 'mailpoet' ) } value={ updatedValue } onChange={ ( value ) => setUpdatedValue( value ) } + __nextHasNoMarginBottom // To avoid warning about deprecation in console />