Spacefinder on Interactives Part 2 - Desktop

[Jakeii]

What does this change?

Introduce a number of checks and changes to get spacefinder working on interactives on desktop.

1. If the content--interactive-grid element is >= that of the viewport, do not insert right rail ads, this is an indicator of the interactive behaving very different to a regular article, so don't even try. (example interactive)
2. If the article body width is the full width of the content grid, we don't add negative margin to the right rail ads, which we do for regular articles, more details below on this.
3. For any interactive, if spacefinder does run, it uses the much more conservative opponent selector :scope > :not(p) as elements in interactives are a bit of a wild west, and data-spacefinder-role is not enough to determine if an element expands to the right.

The styles (in DCR) will be updated to:

before	after
.ad-slot-container--offset-right { ${from.desktop} { float: right; max-width: 300px; margin-right: -330px; background-color: transparent; } ${from.leftCol} { margin-right: -310px; } ${from.wide} { margin-right: -400px; } }	.ad-slot-container--right-column { ${from.desktop} { float: right; max-width: 300px; background-color: transparent; } } .ad-slot-container--offset-right { ${from.desktop} { margin-right: -330px; } ${from.leftCol} { margin-right: -310px; } ${from.wide} { margin-right: -400px; } }

.ad-slot-container--offset-right is now only added if the article body isn't full width AKA all articles and a few interactive.

Why?

For most interactives the article body is the full width of the grid, with paragrahs restricted to 620px and positioned in the body using a left margin, for these cases we don't want to apply the negative right margin that we apply for normal articles (and some interactives), we just need to float: right, so I've split the class into two so that negative margins aren't applied for these cases.

Visual of the the parent element of paragraphs to hopefully demonstrate the scenarios:

Normal articles with the body positioned using grid:

Interactives with full width article body:

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6bddc77

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

Size Change: +278 B (+0.11%)

Total Size: 243 kB

Filename	Size	Change
bundle/dist/prod/artifacts/commercial/********************/graun.3.commercial.js	0 B	-14.4 kB (removed)	🏆
bundle/dist/prod/artifacts/commercial/********************/graun.569.commercial.js	14.7 kB	+14.7 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
bundle/dist/prod/artifacts/commercial/********************/graun.148.commercial.js	4.36 kB	0 B
bundle/dist/prod/artifacts/commercial/********************/graun.317.commercial.js	617 B	0 B
bundle/dist/prod/artifacts/commercial/********************/graun.574.commercial.js	20.4 kB	0 B
bundle/dist/prod/artifacts/commercial/********************/graun.598.commercial.js	127 kB	0 B
bundle/dist/prod/artifacts/commercial/********************/graun.756.commercial.js	5.23 kB	0 B
bundle/dist/prod/artifacts/commercial/********************/graun.769.commercial.js	13.5 kB	0 B
bundle/dist/prod/artifacts/commercial/********************/graun.ad-free.commercial.js	4.46 kB	-2 B (-0.04%)
bundle/dist/prod/artifacts/commercial/********************/graun.consented-advertising.commercial.js	29.4 kB	-2 B (-0.01%)
bundle/dist/prod/artifacts/commercial/********************/graun.consentless-advertising.commercial.js	1.8 kB	+1 B (+0.06%)
bundle/dist/prod/artifacts/commercial/********************/graun.Prebid.js.commercial.js	2.51 kB	0 B
bundle/dist/prod/artifacts/commercial/********************/graun.standalone.commercial.js	19.1 kB	-7 B (-0.04%)

_{compressed-size-action}

[github-actions]

Deploy build 5582 of dotcom::commercial-bundle to CODE

All deployment options

• Deploy build 5582 of dotcom::commercial-bundle to CODE
• Deploy parts of build 5582 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.