🐛 Fix amp-story-captions layout and fix max-height of `amp-story-…

…grid-layer`

`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

@@ -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>

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 {