fix native ads cut off with max height

[dskamiotis]

What does this change?

This allows the viewport to be made <980px in width or to change orientation on an iPad without the native ad getting cut off at the the bottom.

Why?

Native ads resize on render and therefore change ratio (width and height), therefore when we reduce the width of the viewport or change the orientation on the iPad the bottom gets cut off.
The CSS states a max-height of 624px which persists at all breakpoints.

The resize is a Post Message, so when messenger tells us to resize (which only happens for in-house creatives) it should also check the container and remove max-height if necessary.

Screenshot

Before	After

[changeset-bot]

🦋 Changeset detected

Latest commit: b64c6ec

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@guardian/commercial	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Ad load time test results

For consented, top-above-nav took on average 4606ms to load.
For consentless, top-above-nav took on average 3039ms to load.

Test conditions:

• 5mbps download speed
• 1.5mbps upload speed
• 150ms latency

[Jakeii]

This needs to be inside the fastdom.mutate below

[dskamiotis]

Moved to be immediately applied in fastdom.mutate

[Jakeii]

Should this be in the iframeContainer conditional?

[dskamiotis]

I thought this would be appropriate, as we need an iFrameContainer to be present in order to apply the styling?
Do you mean to add the styling regardless of conditions?

return fastdom.mutate(() => {
    Object.assign(iframe.style, styles);

    if (iframeContainer) {
        Object.assign(iframeContainer.style, styles);
    }
    
    adSlot.style.maxHeight = 'none'; // Applied regardless of iframeContainer
});