Fix ArticleMeta for wide views in the app

[vlbee]

What does this change?

Replaces #14994

Ensures the ArticleMetaApp component is used for all screenwidths when the rendering target is Apps. This ensures the Listen to Article button appears on tablet landscape views.

No designs exist for the app-specic meta buttons (Follow, Notifications, Listen to Article) to appear in the Left Column meta component. The solution agreed by the Apps Ex team was to continue serving the "until.leftcol" grid (vertical tablet view) on wider breakpoints on the Apps and just make the screen margins wider to accommodate

No change has been made to wide screen article body layouts where elements overflow into the left and right columns.

Layouts used for Apps based on DecideLayoutApps

• StandardLayout - Changed.
• ImmersiveLayout - Changed.
• CommentLayout - Changed.
• ShowcaseLayout - Changed.
• InteractiveLayout - Changed.
• FullPageInteractiveLayout - No change. Layout does not include meta component for either web or apps. No audio duration available for these either because text hard coded in the atom (limited use eg. Month's best books, documentaries)
• LiveLayout - No change. L2A button does not render on galleries
• GalleryLayout - No change. L2A button does not render on galleries
• PictureLayout - No change. L2A button does not render on picture layouts

Why?

The screen on some tablets in landscape are wider than the previous leftCol breakpoint being used to serve app-specific elements, so DCAR was serving the web meta component on extra wide app devices, including the app installed on Chromebooks.

Screenshots

BEFORE & AFTER

Standard Layout before/after

Comment Layout before/after

Showcase Layout before/after

Immersive Layout before/after

Interactive Layout before/after

[github-actions]

Deploy build 23582 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 391 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 391 of dotcom:ab-testing to CODE
• Deploy parts of build 391 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.

[SiAdcock]

Thanks for this @vlbee, the implementation meets the brief. I do however feel a bit queasy about the grid in apps and on web diverging in this way. So this is me questioning a design / product decision rather than commenting on the code specifically.

One of the benefits of the DCAR web-apps unification is that it simplifies design decisions and engineering overhead. This change adds complexity, new surprises and potential edge cases in the future.

If there's a design case to be made for having a two-column – as opposed to three-column – layout on landscape tablet within the apps, the same case could, and arguably should, apply to web as well.

Is it fair to say that the only reason to do this is because we don't currently have a design that incorporates this new button into the left column meta? If so this fix feels heavy-handed, and I'd suggest design involvement could yield a more sustainable solution (a button in the leftcol meta, for instance).