From dd37e6a543082da8669813fba475313f86908a38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Mon, 6 Jan 2025 11:10:03 +0100
Subject: [PATCH] Unify link tag edit popover look with native link edit
 popover

[MAILPOET-6379]
---
 .../personalization-tags/index.scss           | 19 ++++++++++++++-----
 .../personalization-tags-popover.tsx          | 11 ++++++++++-
 2 files changed, 24 insertions(+), 6 deletions(-)

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 0edd0ff0e8..5f141294df 100644
--- a/packages/js/email-editor/src/components/personalization-tags/index.scss
+++ b/packages/js/email-editor/src/components/personalization-tags/index.scss
@@ -78,11 +78,20 @@
   justify-content: center;
 
   .mailpoet-personalization-tag-popover__content {
-    padding: 8px;
-    width: 400px;
+    max-width: 350px;
+    min-width: auto;
+    width: 90vw;
+
+    .components-base-control {
+      margin: 16px;
+    }
   }
-  .mailpoet-personalization-tag-popover__content-button {
-    padding-top: 10px;
-    text-align: center;
+  .mailpoet-personalization-tag-popover__content-buttons {
+    margin: 16px;
+    text-align: right;
+
+    .components-button {
+      margin-left: 8px;
+    }
   }
 }
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 8bff597284..77475c263f 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
@@ -74,8 +74,17 @@ const PersonalizationTagsPopover = ( {
 							value={ updatedValue }
 							onChange={ ( value ) => setUpdatedValue( value ) }
 							__nextHasNoMarginBottom // To avoid warning about deprecation in console
+							__next40pxDefaultSize
 						/>
-						<div className="mailpoet-personalization-tag-popover__content-button">
+						<div className="mailpoet-personalization-tag-popover__content-buttons">
+							<Button
+								isTertiary
+								onClick={ () => {
+									setIsPopoverVisible( false );
+								} }
+							>
+								{ __( 'Cancel', 'mailpoet' ) }
+							</Button>
 							<Button
 								isPrimary
 								onClick={ () => {