Set background colour for trending topics and podcast sections #13171

cemms1 · 2025-01-17T11:47:46Z

What does this change?

Sets a background colour on the trending topics and thrasher sections
Ensures ContainerOverrides wraps the other sections that need it (Podcast/Media)
Removes ContainerOverrides wrapper from sections that don't need it (thrashers)

Why?

Resolves visual bug when viewing front pages with a page skin applied where sections had a transparent background colour

Screenshots

Before	After

github-actions · 2025-01-17T11:50:41Z

Deploy build 15863 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-01-17T11:52:27Z

Size Change: 0 B

Total Size: 884 kB

ℹ️ View Unchanged

Filename	Size
`dotcom-rendering/dist/1076.client.web.********************.js`	3.41 kB
`dotcom-rendering/dist/1262.client.web.********************.js`	4.49 kB
`dotcom-rendering/dist/1301.client.web.********************.js`	4.82 kB
`dotcom-rendering/dist/1401.client.web.********************.js`	441 B
`dotcom-rendering/dist/1477.client.web.********************.js`	3.52 kB
`dotcom-rendering/dist/1679.client.web.********************.js`	2.49 kB
`dotcom-rendering/dist/1714.client.web.********************.js`	2.87 kB
`dotcom-rendering/dist/1891.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/2188.client.web.********************.js`	6.52 kB
`dotcom-rendering/dist/2444.client.web.********************.js`	2.67 kB
`dotcom-rendering/dist/2482.client.web.********************.js`	44.8 kB
`dotcom-rendering/dist/280.client.web.********************.js`	531 B
`dotcom-rendering/dist/3213.client.web.********************.js`	5.42 kB
`dotcom-rendering/dist/342.client.web.********************.js`	4.18 kB
`dotcom-rendering/dist/3524.client.web.********************.js`	3.51 kB
`dotcom-rendering/dist/3769.client.web.********************.js`	22.7 kB
`dotcom-rendering/dist/3789.client.web.********************.js`	3.58 kB
`dotcom-rendering/dist/39.client.web.********************.js`	3.06 kB
`dotcom-rendering/dist/3937.client.web.********************.js`	3.85 kB
`dotcom-rendering/dist/4020.client.web.********************.js`	14.4 kB
`dotcom-rendering/dist/4170.client.web.********************.js`	16.3 kB
`dotcom-rendering/dist/4237.client.web.********************.js`	3.22 kB
`dotcom-rendering/dist/4285.client.web.********************.js`	6.12 kB
`dotcom-rendering/dist/4501.client.web.********************.js`	4.29 kB
`dotcom-rendering/dist/4684.client.web.********************.js`	3.17 kB
`dotcom-rendering/dist/4791.client.web.********************.js`	4.94 kB
`dotcom-rendering/dist/5095.client.web.********************.js`	4.17 kB
`dotcom-rendering/dist/5598.client.web.********************.js`	4.49 kB
`dotcom-rendering/dist/5721.client.web.********************.js`	3.64 kB
`dotcom-rendering/dist/5862.client.web.********************.js`	12.3 kB
`dotcom-rendering/dist/5922.client.web.********************.js`	8.08 kB
`dotcom-rendering/dist/6021.client.web.********************.js`	11.1 kB
`dotcom-rendering/dist/6061.client.web.********************.js`	3.63 kB
`dotcom-rendering/dist/6073.client.web.********************.js`	3.53 kB
`dotcom-rendering/dist/6080.client.web.********************.js`	3.27 kB
`dotcom-rendering/dist/6627.client.web.********************.js`	10.4 kB
`dotcom-rendering/dist/6659.client.web.********************.js`	3.58 kB
`dotcom-rendering/dist/6876.client.web.********************.js`	2.67 kB
`dotcom-rendering/dist/6882.client.web.********************.js`	12.6 kB
`dotcom-rendering/dist/6903.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/6931.client.web.********************.js`	2.56 kB
`dotcom-rendering/dist/6940.client.web.********************.js`	526 B
`dotcom-rendering/dist/7026.client.web.********************.js`	5.41 kB
`dotcom-rendering/dist/7116.client.web.********************.js`	23 kB
`dotcom-rendering/dist/719.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/7350.client.web.********************.js`	3.32 kB
`dotcom-rendering/dist/7513.client.web.********************.js`	157 B
`dotcom-rendering/dist/7540.client.web.********************.js`	2.72 kB
`dotcom-rendering/dist/7546.client.web.********************.js`	7.36 kB
`dotcom-rendering/dist/7861.client.web.********************.js`	617 B
`dotcom-rendering/dist/8030.client.web.********************.js`	4.18 kB
`dotcom-rendering/dist/8067.client.web.********************.js`	3.39 kB
`dotcom-rendering/dist/895.client.web.********************.js`	5.14 kB
`dotcom-rendering/dist/9242.client.web.********************.js`	3.75 kB
`dotcom-rendering/dist/9288.client.web.********************.js`	2.51 kB
`dotcom-rendering/dist/9558.client.web.********************.js`	3.53 kB
`dotcom-rendering/dist/9665.client.web.********************.js`	4.04 kB
`dotcom-rendering/dist/9735.client.web.********************.js`	4.46 kB
`dotcom-rendering/dist/9766.client.web.********************.js`	3.4 kB
`dotcom-rendering/dist/9771.client.web.********************.js`	3.69 kB
`dotcom-rendering/dist/9995.client.web.********************.js`	20.3 kB
`dotcom-rendering/dist/Accessibility-importable.client.web.********************.js`	6.71 kB
`dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js`	2.85 kB
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	4.85 kB
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	423 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	3.63 kB
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	2.7 kB
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	2.66 kB
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.55 kB
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	2.59 kB
`dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js`	6.32 kB
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	2 kB
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	2.88 kB
`dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js`	37.2 kB
`dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js`	1.96 kB
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.75 kB
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	5.77 kB
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	2.66 kB
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	7.03 kB
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	5.14 kB
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	538 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	2.29 kB
`dotcom-rendering/dist/Crossword-importable.client.web.********************.js`	278 B
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	1.93 kB
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	2.44 kB
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	1.74 kB
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	2.82 kB
`dotcom-rendering/dist/Dropdown-importable.client.web.********************.js`	1.72 kB
`dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js`	3.49 kB
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	3.94 kB
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.02 kB
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	1.93 kB
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	3.8 kB
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	617 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	2.52 kB
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	343 B
`dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js`	3.5 kB
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.9 kB
`dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js`	7.37 kB
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	6.26 kB
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	11.4 kB
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	7.97 kB
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.58 kB
`dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js`	15.8 kB
`dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js`	10.2 kB
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	783 B
`dotcom-rendering/dist/index.client.web.********************.js`	44.7 kB
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	2.9 kB
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	851 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	8.49 kB
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	3.74 kB
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	5.68 kB
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.55 kB
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	6.38 kB
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	434 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.53 kB
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.55 kB
`dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js`	4.82 kB
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.72 kB
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	7.61 kB
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	5.89 kB
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.69 kB
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	3.85 kB
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	5.94 kB
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	5.11 kB
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	5.32 kB
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.72 kB
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	543 B
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	802 B
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	750 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	543 B
`dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js`	468 B
`dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js`	1.74 kB
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	2.53 kB
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	6.11 kB
`dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js`	7.07 kB
`dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js`	6.28 kB
`dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js`	4.4 kB
`dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js`	4.37 kB
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	4.1 kB
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.22 kB
`dotcom-rendering/dist/sentry.client.web.********************.js`	794 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.69 kB
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	485 B
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	919 B
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	730 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	2.1 kB
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	4.46 kB
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.56 kB
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	5.83 kB
`dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js`	4.37 kB
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	4.84 kB
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	5.71 kB
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	6.15 kB
`dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js`	8.13 kB
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	2.41 kB
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	1.23 kB
`dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js`	13.5 kB
`dotcom-rendering/dist/TopBar-importable.client.web.********************.js`	9.29 kB
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.49 kB
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.13 kB
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	2.91 kB
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	5.9 kB
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	2.78 kB
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	4.38 kB

_{compressed-size-action}

github-actions · 2025-01-17T12:02:43Z

Deploy build 40052 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-01-17T12:44:47Z

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.

…alettes

…cify background colour

prout-bot · 2025-01-17T16:32:03Z

Seen on PROD (merged by @cemms1 7 minutes and 45 seconds ago) Please check your changes!

github-actions bot added the dotcom-rendering label Jan 17, 2025

cemms1 requested a review from a team January 17, 2025 12:44

cemms1 marked this pull request as ready for review January 17, 2025 12:44

cemms1 requested a review from a team as a code owner January 17, 2025 12:44

cemms1 added the run_chromatic Runs chromatic when label is applied label Jan 17, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 17, 2025

cemms1 added 3 commits January 17, 2025 14:50

set background colour for trending topics section and podcast/media p…

fbf3ef4

…alettes

remove duplicated pageskin container for thrashers containers and spe…

98ed975

…cify background colour

use front container background instead of section background colour

c7aa9cf

cemms1 force-pushed the cemms1/fix-section-backgrounds-for-pageskins branch from 91fddf0 to c7aa9cf Compare January 17, 2025 14:55

cemms1 added the run_chromatic Runs chromatic when label is applied label Jan 17, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 17, 2025

Jakeii approved these changes Jan 17, 2025

View reviewed changes

cemms1 merged commit 56aa76e into main Jan 17, 2025
31 checks passed

cemms1 deleted the cemms1/fix-section-backgrounds-for-pageskins branch January 17, 2025 16:24

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Jan 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set background colour for trending topics and podcast sections #13171

Set background colour for trending topics and podcast sections #13171

cemms1 commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025

prout-bot commented Jan 17, 2025

Set background colour for trending topics and podcast sections #13171

Set background colour for trending topics and podcast sections #13171

Conversation

cemms1 commented Jan 17, 2025 • edited Loading

What does this change?

Why?

Screenshots

github-actions bot commented Jan 17, 2025 • edited Loading

Deploy build 15863 of dotcom:rendering-all to CODE

github-actions bot commented Jan 17, 2025 • edited Loading

github-actions bot commented Jan 17, 2025 • edited Loading

Deploy build 40052 of Mobile::mobile-apps-rendering to CODE

github-actions bot commented Jan 17, 2025

prout-bot commented Jan 17, 2025

cemms1 commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

Deploy build 15863 of `dotcom:rendering-all` to CODE

github-actions bot commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

Deploy build 40052 of `Mobile::mobile-apps-rendering` to CODE