Fix: Story Ads UI scaling issue on 4k monitors

extensions/amp-story-auto-ads/0.1/amp-story-auto-ads-cta-button.css

@@ -25,6 +25,20 @@
   max-width: calc(100vw - 64px);
 }
 
+/* Scale up CTA button for high-resolution displays (4K) */
+@media screen and (min-width: 2560px) {
+  .i-amphtml-story-ad-link {
+    height: 54px !important;
+    line-height: 54px !important;
+    border-radius: 30px !important;
+    bottom: 48px !important;
+    min-width: 180px !important;
+    font-size: 21px !important;
+    padding: 0 15px !important;
+    box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.16) !important;
+  }
+}
+
 [cta-active].i-amphtml-story-ad-link {
   animation-delay: 100ms !important;
   animation-duration: 300ms !important;
@@ -33,6 +47,13 @@
   animation-name: ad-cta !important;
 }
 
+/* Adjust animation for high-resolution displays (4K) */
+@media screen and (min-width: 2560px) {
+  [cta-active].i-amphtml-story-ad-link {
+    animation-duration: 350ms !important;
+  }
+}
+
 @keyframes ad-cta {
   from {
     opacity: 0;

extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.css

@@ -5,6 +5,20 @@
   top: 67.5% !important;
 }
 
+/* Scale CTA container for high-resolution displays (4K) */
+@media screen and (min-width: 2560px) {
+  .i-amphtml-cta-container {
+    /* Increase the size of the container to accommodate larger CTA button */
+    bottom: 0 !important;
+    height: 120px !important;
+  }
+
+  .i-amphtml-story-desktop-fullbleed .i-amphtml-cta-container {
+    bottom: 12.5vh !important;
+    height: auto !important;
+  }
+}
+
 .i-amphtml-glass-pane {
   height: 100% !important;
   width: 100% !important;

extensions/amp-story-auto-ads/0.1/story-ad-button-text-fitter.js

@@ -9,8 +9,14 @@ const MAX_HEIGHT = 32;
 const FontSizes = {
   MIN: 12,
   MAX: 14,
+  // High-resolution display font sizes
+  HIGH_RES_MIN: 18,
+  HIGH_RES_MAX: 21,
 };
 
+/** @const {number} Breakpoint for high-resolution displays (4K) */
+const HIGH_RES_BREAKPOINT = 2560;
+
 export class ButtonTextFitter {
   /**
    * @param {!../../../src/service/ampdoc-impl.AmpDoc} ampdoc
@@ -50,14 +56,26 @@ export class ButtonTextFitter {
     return this.mutator_
       .mutateElement(container, () => {
         this.measurer_.textContent = content;
+
+        // Check if we're on a high-resolution display
+        const isHighRes = this.doc_.defaultView.innerWidth >= HIGH_RES_BREAKPOINT;
+
+        // Use appropriate font size range based on screen resolution
+        const minFontSize = isHighRes ? FontSizes.HIGH_RES_MIN : FontSizes.MIN;
+        const maxFontSize = isHighRes ? FontSizes.HIGH_RES_MAX : FontSizes.MAX;
+
+        // For high-res displays, we scale the MAX_HEIGHT proportionally
+        const buttonHeight = isHighRes ? MAX_HEIGHT * 1.5 : MAX_HEIGHT;
+
         const fontSize = calculateFontSize(
           this.measurer_,
-          MAX_HEIGHT,
+          buttonHeight,
           this.getMaxWidth_(pageElement),
-          FontSizes.MIN,
-          FontSizes.MAX
+          minFontSize,
+          maxFontSize
         );
-        if (fontSize >= FontSizes.MIN) {
+
+        if (fontSize >= minFontSize) {
           this.updateFontSize_(container, fontSize);
           success = true;
         }
@@ -70,12 +88,16 @@ export class ButtonTextFitter {
   /**
    * Called on each button creation, in case of window resize.
    * Page width - (2 x 32px of padding on each side) + (2 x 10px padding on button).
+   * For high-resolution displays, we scale the padding proportionally.
    * @param {!Element} pageElement
    * @return {number}
    * @private
    */
   getMaxWidth_(pageElement) {
-    return pageElement./*OK*/ offsetWidth - 84;
+    const isHighRes = this.doc_.defaultView.innerWidth >= HIGH_RES_BREAKPOINT;
+    // For high-res displays, we use a larger padding to maintain proportions
+    const padding = isHighRes ? 126 : 84; // 84 * 1.5 = 126
+    return pageElement./*OK*/ offsetWidth - padding;
   }
 
   /**