Improve narrow YouTube Click to Load placeholders

When the YouTube Click to Load placeholders are very narrow, the
information text takes up too much space and some of the other
elements are lost. Let's tweak narrow placeholders, to hide that
information text and move the "Learn more" link. This isn't the best
approach (using @container queries[1] might be better), but this code
is going to be refactored shortly anyway.

1 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Author: kzar

src/features/click-to-load.js

@@ -461,6 +461,7 @@ async function replaceYouTubeCTL (trackingElement, widget, togglePlaceholder = f
             widget, trackingElement, blockingDialog, currentPlaceholder
         )
         showExtraUnblockIfShortPlaceholder(shadowRoot, blockingDialog)
+        hideInfoTextIfNarrowPlaceholder(shadowRoot, blockingDialog, 300)
     }
 }
 
@@ -492,6 +493,40 @@ function showExtraUnblockIfShortPlaceholder (shadowRoot, placeholder) {
     }
 }
 
+/**
+ * Hide the info text (and move the "Learn More" link) if the placeholder is too
+ * narrow.
+ * @param {Element} shadowRoot
+ * @param {Element} placeholder Placeholder for tracking element
+ * @param {number} narrowWidth
+ *    Maximum placeholder width (in pixels) for the placeholder to be considered
+ *    narrow.
+ */
+function hideInfoTextIfNarrowPlaceholder (shadowRoot, placeholder, narrowWidth) {
+    const { height: placeholderHeight } = window.getComputedStyle(placeholder)
+    if (parseInt(placeholderHeight, 10) <= narrowWidth) {
+        const buttonContainer =
+              shadowRoot.querySelector('.DuckDuckGoButton.primary').parentElement
+        const contentTitle = shadowRoot.getElementById('contentTitle')
+        const infoText = shadowRoot.getElementById('infoText')
+        const innerDiv = shadowRoot.querySelector('.DuckDuckGoSocialContainer')
+        const learnMoreLink = shadowRoot.querySelector('.learnMoreLink')
+
+        // Remove the information text.
+        infoText.remove()
+        learnMoreLink.remove()
+
+        // Append the "Learn More" link to the title.
+        contentTitle.innerText += '. '
+        learnMoreLink.style.removeProperty('font-size')
+        contentTitle.appendChild(learnMoreLink)
+
+        // Improve margin/padding, to ensure as much is displayed as possible.
+        buttonContainer.style.removeProperty('margin')
+        innerDiv.style.height = 'calc(100% - 80px)'
+    }
+}
+
 /**
  * Replace the blocked CTP elements on the page with placeholders.
  * @param {Element} [targetElement]
@@ -600,6 +635,7 @@ function getLearnMoreLink (mode) {
     linkElement.href = 'https://help.duckduckgo.com/duckduckgo-help-pages/privacy/embedded-content-protection/'
     linkElement.target = '_blank'
     linkElement.textContent = sharedStrings.learnMore
+    linkElement.classList.add('learnMoreLink')
     return linkElement
 }
 
@@ -1056,10 +1092,14 @@ async function createContentBlock (widget, button, textButton, img, bottomRow) {
     const contentTitle = document.createElement('div')
     contentTitle.style.cssText = styles.contentTitle
     contentTitle.textContent = widget.replaceSettings.infoTitle
+    contentTitle.id = 'contentTitle'
     contentRow.appendChild(contentTitle)
     const contentText = document.createElement('div')
     contentText.style.cssText = styles.contentText
-    contentText.textContent = widget.replaceSettings.infoText + ' '
+    const contentTextSpan = document.createElement('span')
+    contentTextSpan.id = 'infoText'
+    contentTextSpan.textContent = widget.replaceSettings.infoText + ' '
+    contentText.appendChild(contentTextSpan)
     contentText.appendChild(getLearnMoreLink())
     contentRow.appendChild(contentText)
     element.appendChild(contentRow)