From 11a2b7270890d1e2719d956aa5a9b2459898d119 Mon Sep 17 00:00:00 2001
From: Anurag Vasanwala <75766877+AnuragVasanwala@users.noreply.github.com>
Date: Wed, 18 Oct 2023 18:12:33 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20`amp-story-captions`=20lay?=
 =?UTF-8?q?out=20and=20fix=20`max-height`=20of=20`amp-story-grid-layer`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`amp-story-captions` adds caption in shadow-dom. Thus, parent `div` container of the `amp-story-captions` won't reflect the actual size of the `amp-story-captions`.

This will fix this issue by setting `max-height` of the `amp-story-grid-layer.align-bottom` exactly to the shadow-dom component.

Additionally, fixed-height layout of the `amp-story-captions` is changed to container in order to occupy only required space.
---
 packages/output/src/page.js         | 6 +++---
 packages/output/src/utils/styles.js | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/output/src/page.js b/packages/output/src/page.js
index 8dfc1180ec09..ecd6887323cc 100644
--- a/packages/output/src/page.js
+++ b/packages/output/src/page.js
@@ -197,13 +197,13 @@ function OutputPage({
           aspect-ratio={ASPECT_RATIO}
           class="grid-layer align-bottom"
         >
-          <div className="captions-area">
+          {/* `backgroundColor` is added only for testing purpose. */}
+          <div className="captions-area" style={{ backgroundColor: 'blue' }}>
             {videoCaptions.map((captionId) => (
               <amp-story-captions
                 key={captionId}
                 id={captionId}
-                layout="fixed-height"
-                height="100"
+                layout="container"
               />
             ))}
           </div>
diff --git a/packages/output/src/utils/styles.js b/packages/output/src/utils/styles.js
index 45288ea1e12e..cc18b1d755e1 100644
--- a/packages/output/src/utils/styles.js
+++ b/packages/output/src/utils/styles.js
@@ -135,6 +135,7 @@ function CustomStyles() {
               amp-story-grid-layer.align-bottom {
                 align-content: end;
                 padding: 0;
+                max-height: calc(100vh - 148px);
               }
 
               .captions-area {