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

Reinstate additional spacing for media cards #12675

Merged
merged 1 commit into from
Oct 24, 2024
Merged

Reinstate additional spacing for media cards #12675

merged 1 commit into from
Oct 24, 2024

Conversation

jamesmockett
Copy link
Contributor

What does this change?

Reinstates the 8px spacing applied to the top of the carousel between tablet and wide breakpoints added in #12576. This was lost when the carousel logic and styling was split out into a separate component.

Why?

The top edge of the carousel is currently flush with the bottom of the navigation buttons. This isn't immediately apparent when the carousel is static or the cards have a transparent background, but it becomes obvious when the carousel is in motion (as the images and buttons touch) or a card has a solid background colour such as a media card.

Screenshots

Tablet leftCol
tablet leftcol

@jamesmockett jamesmockett requested a review from a team as a code owner October 24, 2024 14:38
@jamesmockett jamesmockett self-assigned this Oct 24, 2024
@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.

@jamesmockett jamesmockett added run_chromatic Runs chromatic when label is applied and removed dotcom-rendering labels Oct 24, 2024
@jamesmockett jamesmockett requested review from Georges-GNM and abeddow91 and removed request for a team October 24, 2024 14:38
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 24, 2024
@github-actions GitHub Actions
Copy link

Deploy build 14256 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

Georges-GNM
Georges-GNM approved these changes Oct 24, 2024
View reviewed changes
Copy link
Contributor

@Georges-GNM Georges-GNM left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good spot!

@github-actions GitHub Actions
Copy link

Size Change: +13 B (0%)

Total Size: 921 kB

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

compressed-size-action

@jamesmockett jamesmockett merged commit 873c655 into main Oct 24, 2024
33 checks passed
@jamesmockett jamesmockett deleted the jm/scrollable-media-card-padding branch October 24, 2024 14:46
@prout-bot
Copy link

Seen on PROD (merged by @jamesmockett 15 minutes and 2 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

@Georges-GNM Georges-GNM Georges-GNM approved these changes

@abeddow91 abeddow91 Awaiting requested review from abeddow91

Assignees

@jamesmockett jamesmockett

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

Successfully merging this pull request may close these issues.
3 participants
@jamesmockett @prout-bot @Georges-GNM