Skip to content

Apply padding to immersive interactive captions #13742

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Apr 14, 2025
Merged

Apply padding to immersive interactive captions #13742

merged 1 commit into from
Apr 14, 2025

Conversation

jamesmockett
Copy link
Contributor

@jamesmockett jamesmockett commented Apr 8, 2025 •
edited
Loading

What does this change?

Applies isImmersive prop to captions in immersive interactives. This adds additional padding to compensate for the negative margins used to pull the elements outside the article container and aligns them with the body copy.

(See #13163 for the original PR which added this prop for captions on immersive images.)

Why?

To prevent captions stretching across the full width of the viewport and touching the edges. This occurs on mobile and when the desktop breakpoint is reached (980px).

Screenshots

https://www.theguardian.com/global-development/2025/feb/25/israel-gaza-doctors-surgeons-healthcare-detention-international-law

Before After
before1 after1
before2 after2

@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 8, 2025

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.

@jamesmockett jamesmockett self-assigned this Apr 8, 2025
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Apr 8, 2025
@jamesmockett jamesmockett linked an issue Apr 8, 2025 that may be closed by this pull request
Captions for immersive weighted atoms stretch to full width of viewport on mobile #13478
Closed
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Apr 8, 2025
@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 8, 2025 •
edited
Loading

Size Change: +8 B (0%)

Total Size: 959 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1111.client.web.********************.js 4.31 kB 0 B
dotcom-rendering/dist/1182.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/1259.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/1290.client.web.********************.js 13.2 kB 0 B
dotcom-rendering/dist/1300.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/1325.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/1447.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1763.client.web.********************.js 4.67 kB 0 B
dotcom-rendering/dist/1791.client.web.********************.js 4.21 kB 0 B
dotcom-rendering/dist/1928.client.web.********************.js 5.41 kB 0 B
dotcom-rendering/dist/2166.client.web.********************.js 4.5 kB 0 B
dotcom-rendering/dist/2431.client.web.********************.js 8.02 kB 0 B
dotcom-rendering/dist/2450.client.web.********************.js 2.86 kB 0 B
dotcom-rendering/dist/2602.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/2641.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/2807.client.web.********************.js 15.2 kB 0 B
dotcom-rendering/dist/2903.client.web.********************.js 2.73 kB 0 B
dotcom-rendering/dist/307.client.web.********************.js 4.76 kB 0 B
dotcom-rendering/dist/3095.client.web.********************.js 4.45 kB 0 B
dotcom-rendering/dist/3271.client.web.********************.js 16.5 kB 0 B
dotcom-rendering/dist/3337.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/3380.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/3488.client.web.********************.js 4.45 kB 0 B
dotcom-rendering/dist/353.client.web.********************.js 532 B 0 B
dotcom-rendering/dist/3738.client.web.********************.js 17.9 kB 0 B
dotcom-rendering/dist/3775.client.web.********************.js 525 B 0 B
dotcom-rendering/dist/3784.client.web.********************.js 2.84 kB 0 B
dotcom-rendering/dist/3836.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/4227.client.web.********************.js 4.8 kB 0 B
dotcom-rendering/dist/4229.client.web.********************.js 6.24 kB 0 B
dotcom-rendering/dist/4453.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/4595.client.web.********************.js 7.88 kB 0 B
dotcom-rendering/dist/485.client.web.********************.js 156 B 0 B
dotcom-rendering/dist/4936.client.web.********************.js 4.02 kB 0 B
dotcom-rendering/dist/4972.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/5154.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/5158.client.web.********************.js 7.76 kB 0 B
dotcom-rendering/dist/5309.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/535.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/552.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/569.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/5800.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/5850.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/5884.client.web.********************.js 7.12 kB 0 B
dotcom-rendering/dist/6081.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/6137.client.web.********************.js 3.1 kB 0 B
dotcom-rendering/dist/6688.client.web.********************.js 44.8 kB 0 B
dotcom-rendering/dist/6882.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7256.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/7443.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/7784.client.web.********************.js 4.33 kB 0 B
dotcom-rendering/dist/7809.client.web.********************.js 2.62 kB 0 B
dotcom-rendering/dist/7918.client.web.********************.js 3.3 kB 0 B
dotcom-rendering/dist/8261.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/8410.client.web.********************.js 3.04 kB 0 B
dotcom-rendering/dist/8468.client.web.********************.js 4.45 kB 0 B
dotcom-rendering/dist/8482.client.web.********************.js 440 B 0 B
dotcom-rendering/dist/8891.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/9.client.web.********************.js 20.4 kB 0 B
dotcom-rendering/dist/9275.client.web.********************.js 3.07 kB 0 B
dotcom-rendering/dist/932.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/9338.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/9471.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/9577.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/9628.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/992.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/9923.client.web.********************.js 4.15 kB 0 B
dotcom-rendering/dist/9935.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.41 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 3 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.76 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 426 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.59 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 66.8 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.67 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.74 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 540 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.72 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.07 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.4 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.82 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 955 B 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.43 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.94 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.95 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 620 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.05 kB 0 B
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.25 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 346 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.8 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.47 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.28 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.4 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.07 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.3 kB 0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 852 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.81 kB +8 B (+0.09%)
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.71 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 6.41 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 437 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.54 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.6 kB 0 B
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.82 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.72 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.69 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4.01 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.11 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.26 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.38 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.36 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 751 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 541 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 468 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.69 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.11 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.61 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.82 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.1 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.07 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.23 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.93 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 895 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.38 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.48 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 8.58 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.78 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.07 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.8 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.09 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.91 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.05 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.3 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 842 B 0 B

compressed-size-action

@jamesmockett jamesmockett force-pushed the jm/fix-immersive-interactive-caption branch from 13323e6 to 106df82 Compare April 10, 2025 16:16
@github-actions GitHub Actions
Copy link

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

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

Deploy build 17832 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Apr 14, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Apr 14, 2025
@jamesmockett jamesmockett merged commit f8e0acf into main Apr 14, 2025
31 checks passed
@jamesmockett jamesmockett deleted the jm/fix-immersive-interactive-caption branch April 14, 2025 09:07
@prout-bot
Copy link

Seen on PROD (merged by @jamesmockett 10 minutes and 8 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@DanielCliftonGuardian DanielCliftonGuardian DanielCliftonGuardian approved these changes

Assignees

@jamesmockett jamesmockett

Labels
dotcom-rendering Seen-on-PROD
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Captions for immersive weighted atoms stretch to full width of viewport on mobile
3 participants
@jamesmockett @prout-bot @DanielCliftonGuardian