--- a/browser/components/newtab/lib/BookmarkPanelHub.jsm
+++ b/browser/components/newtab/lib/BookmarkPanelHub.jsm
@@ -122,19 +122,19 @@ class _BookmarkPanelHub {
   showMessage(message, target, win) {
     if (this._response && this._response.collapsed) {
       this.toggleRecommendation(false);
       return;
     }
 
     const createElement = elem =>
       target.document.createElementNS("http://www.w3.org/1999/xhtml", elem);
-
-    if (!target.container.querySelector("#cfrMessageContainer")) {
-      const recommendation = createElement("div");
+    let recommendation = target.container.querySelector("#cfrMessageContainer");
+    if (!recommendation) {
+      recommendation = createElement("div");
       const headerContainer = createElement("div");
       headerContainer.classList.add("cfrMessageHeader");
       recommendation.setAttribute("id", "cfrMessageContainer");
       recommendation.addEventListener("click", async e => {
         target.hidePopup();
         const url = await FxAccounts.config.promiseEmailFirstURI("bookmark");
         win.ownerGlobal.openLinkIn(url, "tabshifted", {
           private: false,
@@ -185,16 +185,51 @@ class _BookmarkPanelHub {
       headerContainer.appendChild(close);
       recommendation.appendChild(headerContainer);
       recommendation.appendChild(content);
       recommendation.appendChild(cta);
       target.container.appendChild(recommendation);
     }
 
     this.toggleRecommendation(true);
+    this._adjustPanelHeight(win, recommendation);
+  }
+
+  /**
+   * Adjust the size of the container for locales where the message is
+   * longer than the fixed 150px set for height
+   */
+  async _adjustPanelHeight(window, messageContainer) {
+    const { document } = window;
+    // Contains the screenshot of the page we are bookmarking
+    const screenshotContainer = document.getElementById(
+      "editBookmarkPanelImage"
+    );
+    // Wait for strings to be added which can change element height
+    await document.l10n.translateElements([messageContainer]);
+    window.requestAnimationFrame(() => {
+      let { height } = messageContainer.getBoundingClientRect();
+      if (height > 150) {
+        messageContainer.classList.add("longMessagePadding");
+        // Get the new value with the added padding
+        height = messageContainer.getBoundingClientRect().height;
+        // Needs to be adjusted to match the message height
+        screenshotContainer.style.height = `${height}px`;
+      }
+    });
+  }
+
+  /**
+   * Restore the panel back to the original size so the slide in
+   * animation can run again
+   */
+  _restorePanelHeight(window) {
+    const { document } = window;
+    // Contains the screenshot of the page we are bookmarking
+    document.getElementById("editBookmarkPanelImage").style.height = "";
   }
 
   toggleRecommendation(visible) {
     if (!this._response) {
       return;
     }
 
     const { target } = this._response;
@@ -219,16 +254,17 @@ class _BookmarkPanelHub {
   }
 
   _removeContainer(target) {
     if (target || (this._response && this._response.target)) {
       const container = (
         target || this._response.target
       ).container.querySelector("#cfrMessageContainer");
       if (container) {
+        this._restorePanelHeight(this._response.win);
         container.remove();
       }
     }
   }
 
   hideMessage(target) {
     this._removeContainer(target);
     this.toggleRecommendation(false);
@@ -245,17 +281,17 @@ class _BookmarkPanelHub {
       close: e => {
         e.stopPropagation();
         this.toggleRecommendation(false);
       },
     };
     // Remove any existing message
     this.hideMessage(panelTarget);
     // Reset the reference to the panel elements
-    this._response = { target: panelTarget };
+    this._response = { target: panelTarget, win };
     // Required if we want to preview messages that include fluent strings
     win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
     win.MozXULElement.insertFTLIfNeeded("browser/branding/sync-brand.ftl");
     this.showMessage(message.content, panelTarget, win);
   }
 
   sendImpression() {
     this._addImpression(this._response);

--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -42,33 +42,37 @@
   position: relative;
   margin: 6px 8px 0 8px;
 }
 
 #editBookmarkPanelRecommendation {
   position: absolute;
   height: 100%;
   width: 100%;
-  transition: all 0.25s cubic-bezier(0.07, 0.95, 0, 1);
+  transition: transform 0.25s cubic-bezier(0.07, 0.95, 0, 1);
 }
 
 #editBookmarkPanelRecommendation[disabled] {
   transform: translateY(-100%);
 }
 
-#editBookmarkPanelRecommendation > div {
+#editBookmarkPanelRecommendation #cfrMessageContainer {
   border-radius: 2px;
   display: flex;
   flex-direction: column;
-  height: 150px;
+  min-height: 150px;
   cursor: pointer;
   position: relative;
   padding: 0 16px;
 }
 
+#editBookmarkPanelRecommendation #cfrMessageContainer.longMessagePadding {
+  padding-bottom: 10px;
+}
+
 #editBookmarkPanelRecommendation > div::-moz-focus-inner {
   border: none;
 }
 
 #editBookmarkPanelRecommendationTitle {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.25;
@@ -153,16 +157,21 @@ html|img#editBookmarkPanelFavicon[src] {
 
 #editBookmarkPanelImage {
   border-radius: 2px;
   height: 150px;
   background-image: -moz-element(#editBookmarkPanelImageCanvas);
   background-repeat: no-repeat;
   background-size: cover;
   margin: 0 2px;
+  /* When adjusting the height for long CFR messages we want the animations
+   * to align. The delay is used to force the animation to start when the
+   * panel message has finished sliding down. */
+  transition: height 0.28s cubic-bezier(0.07, 0.95, 0, 1);
+  transition-delay: 10ms;
 }
 
 #editBookmarkPanelRows,
 #editBookmarkPanelBottomContent {
   padding: var(--arrowpanel-padding);
 }
 
 #editBookmarkPanelRows {