Add fullWidth weighting for interactive atoms

[frederickobrien]

This updates Dotcom to expect and handle interactive atoms with a new fullWidth role, which allows them to go to the edges of the screen on all device sizes. This should cut down on DOM hacking and give interactive devs more time to focus on their stories.

Here you can see it in action:

I did go down a rabbit hole trying to make use of CSS Grid for this. The syntax is succinct and clear, though isn't compatible with the current interactive layouts. @JamieB-gu pointed me towards the grid module (see #4874, #11107), which might be a nice long-term change to look into.

Initial implementation here is just to get it working though very happy to tighten its scope (to just interactive atoms within interactive layouts, for example).

Something else to consider - does the ad insertion script need to be updated to handle the new role as well?

Note: hard code the role as 'fullWidth' around line 1,063 of renderElement.tsx for local testing

[github-actions]

Deploy build 24116 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 24116 of dotcom:rendering-all to CODE
• Deploy parts of build 24116 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Deploy build 537 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 537 of dotcom:ab-testing to CODE
• Deploy parts of build 537 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[JustinPinner]

Looks sensible to me. It's constrained to the Figure, and has a specific use case, but I can't really comment on the CSS values so staying out of the way for someone closer to that to approve :)

[frederickobrien]

I'm off on Monday but would very much appreciate @guardian/dotcom-platform's two cents on the --scrollbar-width variable wrestled with in 5c956c5. This variable is set in interactive atoms using JavaScript, which I'd like to avoid if possible.

Essentially this:

scrollBarWidth = window.innerWidth - document.documentElement.clientWidth

A pure CSS version would be better. I'm sorely tempted to go down the rabbit hole of #15165 - which I think would lead to cleaner, more platform-aligned CSS in the long term - though that's beyond the scope of this PR and shouldn't stand in its way.