Skip to content
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

Use max-width to prevent containers expanding #12615

Merged
merged 4 commits into from
Oct 22, 2024
Merged

Use max-width to prevent containers expanding #12615

merged 4 commits into from
Oct 22, 2024
+1 −4

Conversation

emma-imber
Copy link
Contributor

@emma-imber emma-imber commented Oct 21, 2024 •
edited
Loading

What does this change?

Switches to using max-width instead of overflow to prevent containers expanding beyond 100vw and breaking the layout. Follows on from this PR: #11552

Why?

We're investigating whether or not hiding overflow on ad containers has caused a drop in teads viewability, and we will be closely monitoring to see if this change affects teads viewability.

@emma-imber emma-imber requested a review from a team as a code owner October 21, 2024 15:31
@github-actions GitHub Actions
Copy link

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 GitHub Actions
Copy link

github-actions bot commented Oct 21, 2024 •
edited
Loading

Deploy build 14159 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 21, 2024 •
edited
Loading

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

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 21, 2024 •
edited
Loading

Size Change: 0 B

Total Size: 914 kB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1000.client.web.********************.js 999 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B
dotcom-rendering/dist/1156.client.web.********************.js 3.94 kB
dotcom-rendering/dist/1391.client.web.********************.js 725 B
dotcom-rendering/dist/1417.client.web.********************.js 2.53 kB
dotcom-rendering/dist/146.client.web.********************.js 5.29 kB
dotcom-rendering/dist/1476.client.web.********************.js 784 B
dotcom-rendering/dist/1515.client.web.********************.js 6.84 kB
dotcom-rendering/dist/1628.client.web.********************.js 2.87 kB
dotcom-rendering/dist/1667.client.web.********************.js 918 B
dotcom-rendering/dist/1884.client.web.********************.js 3.4 kB
dotcom-rendering/dist/1888.client.web.********************.js 2.92 kB
dotcom-rendering/dist/1904.client.web.********************.js 12.6 kB
dotcom-rendering/dist/1940.client.web.********************.js 507 B
dotcom-rendering/dist/2123.client.web.********************.js 619 B
dotcom-rendering/dist/2182.client.web.********************.js 529 B
dotcom-rendering/dist/2249.client.web.********************.js 4.91 kB
dotcom-rendering/dist/2310.client.web.********************.js 880 B
dotcom-rendering/dist/2455.client.web.********************.js 4.55 kB
dotcom-rendering/dist/267.client.web.********************.js 917 B
dotcom-rendering/dist/281.client.web.********************.js 642 B
dotcom-rendering/dist/3006.client.web.********************.js 4.48 kB
dotcom-rendering/dist/3109.client.web.********************.js 803 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B
dotcom-rendering/dist/3364.client.web.********************.js 3.97 kB
dotcom-rendering/dist/346.client.web.********************.js 3.21 kB
dotcom-rendering/dist/3769.client.web.********************.js 999 B
dotcom-rendering/dist/3921.client.web.********************.js 2 kB
dotcom-rendering/dist/408.client.web.********************.js 11 kB
dotcom-rendering/dist/4122.client.web.********************.js 1.86 kB
dotcom-rendering/dist/4149.client.web.********************.js 3.77 kB
dotcom-rendering/dist/4282.client.web.********************.js 685 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB
dotcom-rendering/dist/4628.client.web.********************.js 654 B
dotcom-rendering/dist/4769.client.web.********************.js 4.28 kB
dotcom-rendering/dist/4789.client.web.********************.js 12.7 kB
dotcom-rendering/dist/4820.client.web.********************.js 2.42 kB
dotcom-rendering/dist/4866.client.web.********************.js 6.32 kB
dotcom-rendering/dist/4903.client.web.********************.js 6.04 kB
dotcom-rendering/dist/4941.client.web.********************.js 890 B
dotcom-rendering/dist/4951.client.web.********************.js 11.4 kB
dotcom-rendering/dist/5087.client.web.********************.js 439 B
dotcom-rendering/dist/5165.client.web.********************.js 5.31 kB
dotcom-rendering/dist/5340.client.web.********************.js 3.32 kB
dotcom-rendering/dist/5371.client.web.********************.js 3.34 kB
dotcom-rendering/dist/5412.client.web.********************.js 2.89 kB
dotcom-rendering/dist/5538.client.web.********************.js 6.18 kB
dotcom-rendering/dist/5658.client.web.********************.js 750 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B
dotcom-rendering/dist/5761.client.web.********************.js 4.65 kB
dotcom-rendering/dist/5880.client.web.********************.js 828 B
dotcom-rendering/dist/5937.client.web.********************.js 2.17 kB
dotcom-rendering/dist/5944.client.web.********************.js 4.97 kB
dotcom-rendering/dist/5982.client.web.********************.js 3.78 kB
dotcom-rendering/dist/6044.client.web.********************.js 726 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B
dotcom-rendering/dist/6261.client.web.********************.js 3.03 kB
dotcom-rendering/dist/6291.client.web.********************.js 4.26 kB
dotcom-rendering/dist/6505.client.web.********************.js 1 kB
dotcom-rendering/dist/6598.client.web.********************.js 780 B
dotcom-rendering/dist/661.client.web.********************.js 3.21 kB
dotcom-rendering/dist/6638.client.web.********************.js 907 B
dotcom-rendering/dist/6665.client.web.********************.js 5.03 kB
dotcom-rendering/dist/678.client.web.********************.js 804 B
dotcom-rendering/dist/6915.client.web.********************.js 22.7 kB
dotcom-rendering/dist/7072.client.web.********************.js 3.85 kB
dotcom-rendering/dist/7081.client.web.********************.js 20.2 kB
dotcom-rendering/dist/7116.client.web.********************.js 23 kB
dotcom-rendering/dist/7242.client.web.********************.js 4.52 kB
dotcom-rendering/dist/7341.client.web.********************.js 3.99 kB
dotcom-rendering/dist/7407.client.web.********************.js 3.7 kB
dotcom-rendering/dist/7691.client.web.********************.js 853 B
dotcom-rendering/dist/7713.client.web.********************.js 2.02 kB
dotcom-rendering/dist/7780.client.web.********************.js 2.28 kB
dotcom-rendering/dist/7962.client.web.********************.js 3.58 kB
dotcom-rendering/dist/8103.client.web.********************.js 4.02 kB
dotcom-rendering/dist/83.client.web.********************.js 750 B
dotcom-rendering/dist/8318.client.web.********************.js 2.17 kB
dotcom-rendering/dist/840.client.web.********************.js 3.21 kB
dotcom-rendering/dist/8426.client.web.********************.js 1.91 kB
dotcom-rendering/dist/8437.client.web.********************.js 3.13 kB
dotcom-rendering/dist/8504.client.web.********************.js 827 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B
dotcom-rendering/dist/8671.client.web.********************.js 157 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B
dotcom-rendering/dist/8730.client.web.********************.js 4.41 kB
dotcom-rendering/dist/8746.client.web.********************.js 3.01 kB
dotcom-rendering/dist/8815.client.web.********************.js 3.86 kB
dotcom-rendering/dist/8822.client.web.********************.js 526 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B
dotcom-rendering/dist/8903.client.web.********************.js 3.83 kB
dotcom-rendering/dist/8990.client.web.********************.js 3.41 kB
dotcom-rendering/dist/9080.client.web.********************.js 3.69 kB
dotcom-rendering/dist/9122.client.web.********************.js 8.08 kB
dotcom-rendering/dist/9132.client.web.********************.js 4.18 kB
dotcom-rendering/dist/9184.client.web.********************.js 493 B
dotcom-rendering/dist/9216.client.web.********************.js 3.45 kB
dotcom-rendering/dist/9373.client.web.********************.js 4.4 kB
dotcom-rendering/dist/940.client.web.********************.js 10.3 kB
dotcom-rendering/dist/9493.client.web.********************.js 785 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B
dotcom-rendering/dist/9608.client.web.********************.js 3.64 kB
dotcom-rendering/dist/9696.client.web.********************.js 5.88 kB
dotcom-rendering/dist/9721.client.web.********************.js 717 B
dotcom-rendering/dist/9736.client.web.********************.js 44.2 kB
dotcom-rendering/dist/9835.client.web.********************.js 647 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 5.96 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.94 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.48 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.88 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 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.72 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.26 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.96 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.04 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.51 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.96 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.75 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 4.2 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 970 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.43 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.63 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.5 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.4 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 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 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B
dotcom-rendering/dist/index.client.web.********************.js 45.9 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.28 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.24 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.77 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.62 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.1 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.51 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.78 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.28 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.83 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.63 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.95 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.22 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.18 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 803 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.29 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 4.99 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.61 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB
dotcom-rendering/dist/sentry.client.web.********************.js 792 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.85 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 482 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 733 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.5 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.6 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.48 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.8 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.22 kB
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.25 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.74 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 5.05 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.96 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.63 kB
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 5.94 kB

compressed-size-action

@emma-imber emma-imber added the run_chromatic Runs chromatic when label is applied label Oct 21, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 21, 2024
@emma-imber emma-imber added the run_chromatic Runs chromatic when label is applied label Oct 22, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 22, 2024
@emma-imber emma-imber merged commit b78123e into main Oct 22, 2024
32 checks passed
@emma-imber emma-imber deleted the ei/use-max-width-not-clip branch October 22, 2024 13:14
@prout-bot
Copy link

Seen on PROD (merged by @emma-imber 8 minutes and 47 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

@arelra arelra arelra approved these changes

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

Successfully merging this pull request may close these issues.
3 participants
@emma-imber @prout-bot @arelra