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

Ensure the bottom of card meta is not hidden by sublinks #11697

Merged
merged 1 commit into from
Jun 20, 2024
Merged

Ensure the bottom of card meta is not hidden by sublinks #11697

merged 1 commit into from
Jun 20, 2024

Conversation

cemms1
Copy link
Contributor

@cemms1 cemms1 commented Jun 20, 2024 •
edited
Loading

What does this change?

Removes the background colour from sublinks, since this should match the colour of the container.

We need to keep the card background for the main card content to allow the ContainerOverrides component to suitably override the media cards which usually have backgrounds (ArticleDesign.Audio,ArticleDesign.Video,ArticleDesign.Gallery).

Why?

Fixes a visual bug where the 'g' in 'ago' in card meta was being hidden by the sublinks area, due to this having a higher stacking context and a background colour.

Screenshots

Before After
before after

@cemms1 cemms1 added run_chromatic Runs chromatic when label is applied fairground and removed dotcom-rendering labels Jun 20, 2024
@cemms1 cemms1 self-assigned this Jun 20, 2024
@github-actions GitHub Actions
Copy link

Deploy build 11145 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jun 20, 2024
@github-actions GitHub Actions
Copy link

Size Change: -7 B (0%)

Total Size: 842 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1006.client.web.********************.js 3.18 kB 0 B
dotcom-rendering/dist/1094.client.web.********************.js 5.94 kB 0 B
dotcom-rendering/dist/1133.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/1225.client.web.********************.js 785 B 0 B
dotcom-rendering/dist/123.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/1251.client.web.********************.js 3.01 kB 0 B
dotcom-rendering/dist/1299.client.web.********************.js 937 B 0 B
dotcom-rendering/dist/1497.client.web.********************.js 3.81 kB 0 B
dotcom-rendering/dist/1640.client.web.********************.js 4.83 kB 0 B
dotcom-rendering/dist/1692.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/1762.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/1889.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/2170.client.web.********************.js 6.76 kB 0 B
dotcom-rendering/dist/2195.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/226.client.web.********************.js 3.93 kB 0 B
dotcom-rendering/dist/2342.client.web.********************.js 1.01 kB 0 B
dotcom-rendering/dist/2344.client.web.********************.js 3.37 kB 0 B
dotcom-rendering/dist/2373.client.web.********************.js 10.4 kB 0 B
dotcom-rendering/dist/2471.client.web.********************.js 723 B 0 B
dotcom-rendering/dist/2521.client.web.********************.js 2.68 kB 0 B
dotcom-rendering/dist/2778.client.web.********************.js 858 B 0 B
dotcom-rendering/dist/2920.client.web.********************.js 523 B 0 B
dotcom-rendering/dist/297.client.web.********************.js 3.99 kB 0 B
dotcom-rendering/dist/3000.client.web.********************.js 895 B 0 B
dotcom-rendering/dist/3114.client.web.********************.js 663 B 0 B
dotcom-rendering/dist/3118.client.web.********************.js 499 B 0 B
dotcom-rendering/dist/3255.client.web.********************.js 809 B 0 B
dotcom-rendering/dist/3336.client.web.********************.js 785 B 0 B
dotcom-rendering/dist/3411.client.web.********************.js 4.3 kB 0 B
dotcom-rendering/dist/3494.client.web.********************.js 834 B 0 B
dotcom-rendering/dist/3523.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/3642.client.web.********************.js 791 B 0 B
dotcom-rendering/dist/3787.client.web.********************.js 5.49 kB 0 B
dotcom-rendering/dist/3810.client.web.********************.js 18.1 kB 0 B
dotcom-rendering/dist/3922.client.web.********************.js 731 B 0 B
dotcom-rendering/dist/393.client.web.********************.js 5.91 kB 0 B
dotcom-rendering/dist/3932.client.web.********************.js 790 B 0 B
dotcom-rendering/dist/4009.client.web.********************.js 12.7 kB -8 B (-0.06%)
dotcom-rendering/dist/4103.client.web.********************.js 22.6 kB 0 B
dotcom-rendering/dist/4129.client.web.********************.js 4.43 kB 0 B
dotcom-rendering/dist/424.client.web.********************.js 757 B 0 B
dotcom-rendering/dist/4261.client.web.********************.js 4.31 kB 0 B
dotcom-rendering/dist/433.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/4442.client.web.********************.js 833 B 0 B
dotcom-rendering/dist/4523.client.web.********************.js 2.81 kB 0 B
dotcom-rendering/dist/4652.client.web.********************.js 3.59 kB 0 B
dotcom-rendering/dist/4666.client.web.********************.js 9.14 kB 0 B
dotcom-rendering/dist/4673.client.web.********************.js 731 B 0 B
dotcom-rendering/dist/4811.client.web.********************.js 1.01 kB 0 B
dotcom-rendering/dist/5044.client.web.********************.js 811 B 0 B
dotcom-rendering/dist/5077.client.web.********************.js 442 B 0 B
dotcom-rendering/dist/5084.client.web.********************.js 759 B 0 B
dotcom-rendering/dist/5085.client.web.********************.js 3.12 kB 0 B
dotcom-rendering/dist/5247.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/5308.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/536.client.web.********************.js 6.42 kB 0 B
dotcom-rendering/dist/5463.client.web.********************.js 2.94 kB 0 B
dotcom-rendering/dist/565.client.web.********************.js 675 B 0 B
dotcom-rendering/dist/5750.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/5817.client.web.********************.js 922 B 0 B
dotcom-rendering/dist/588.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/5983.client.web.********************.js 9.59 kB 0 B
dotcom-rendering/dist/5995.client.web.********************.js 7.47 kB 0 B
dotcom-rendering/dist/6002.client.web.********************.js 3.09 kB 0 B
dotcom-rendering/dist/606.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/6075.client.web.********************.js 2.98 kB 0 B
dotcom-rendering/dist/6093.client.web.********************.js 758 B 0 B
dotcom-rendering/dist/6139.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/6167.client.web.********************.js 646 B 0 B
dotcom-rendering/dist/6335.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/6351.client.web.********************.js 6.11 kB 0 B
dotcom-rendering/dist/6400.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/6640.client.web.********************.js 913 B 0 B
dotcom-rendering/dist/6921.client.web.********************.js 2.99 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7196.client.web.********************.js 895 B 0 B
dotcom-rendering/dist/72.client.web.********************.js 966 B 0 B
dotcom-rendering/dist/7270.client.web.********************.js 155 B 0 B
dotcom-rendering/dist/7387.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/7660.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/7697.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/7723.client.web.********************.js 925 B 0 B
dotcom-rendering/dist/7968.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/8134.client.web.********************.js 601 B 0 B
dotcom-rendering/dist/8179.client.web.********************.js 834 B 0 B
dotcom-rendering/dist/8228.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/8259.client.web.********************.js 3.51 kB 0 B
dotcom-rendering/dist/8279.client.web.********************.js 43.1 kB 0 B
dotcom-rendering/dist/8565.client.web.********************.js 653 B 0 B
dotcom-rendering/dist/8768.client.web.********************.js 1.73 kB 0 B
dotcom-rendering/dist/8791.client.web.********************.js 1.01 kB 0 B
dotcom-rendering/dist/889.client.web.********************.js 860 B 0 B
dotcom-rendering/dist/8892.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/8907.client.web.********************.js 792 B 0 B
dotcom-rendering/dist/9060.client.web.********************.js 886 B 0 B
dotcom-rendering/dist/9225.client.web.********************.js 583 B 0 B
dotcom-rendering/dist/9396.client.web.********************.js 691 B 0 B
dotcom-rendering/dist/9430.client.web.********************.js 510 B 0 B
dotcom-rendering/dist/9604.client.web.********************.js 528 B 0 B
dotcom-rendering/dist/9609.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/9789.client.web.********************.js 924 B 0 B
dotcom-rendering/dist/9936.client.web.********************.js 1.84 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.84 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 423 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.04 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.47 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 3.08 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.9 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.74 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 4.9 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 5.72 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 6.25 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 3.26 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.81 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.67 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 4.11 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 2.43 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 5.21 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 622 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 837 B 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 346 B 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.7 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 4.56 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.89 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 16.7 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 11.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 3.02 kB 0 B
dotcom-rendering/dist/HeaderTopBar-importable.client.web.********************.js 7.08 kB 0 B
dotcom-rendering/dist/index.client.web.********************.js 45.6 kB +1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 852 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.29 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.69 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js 3.47 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.92 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.46 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.68 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 5.02 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 5.93 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.96 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 5.96 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 8.54 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.14 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 4.08 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 3.04 kB 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.92 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.client.web.********************.js 6.36 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.48 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 4.81 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.47 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.client.web.********************.js 4.43 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.15 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 764 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.89 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 486 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 1.53 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 711 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 5.54 kB 0 B
dotcom-rendering/dist/SignInGateCustomizableText.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 3.93 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.81 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.14 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.61 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/SupportTheG-importable.client.web.********************.js 6.49 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 3.23 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.02 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 5.52 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 3.32 kB 0 B

compressed-size-action

@cemms1 cemms1 marked this pull request as ready for review June 20, 2024 10:33
@cemms1 cemms1 requested a review from a team as a code owner June 20, 2024 10:33
@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.

@cemms1 cemms1 merged commit 5fc15c0 into main Jun 20, 2024
42 checks passed
@cemms1 cemms1 deleted the cemms1/fix-sublink-card-meta-bug branch June 20, 2024 15:46
@prout-bot
Copy link

Seen on PROD (merged by @cemms1 8 minutes and 50 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

@domlander domlander domlander approved these changes

@frederickobrien frederickobrien Awaiting requested review from frederickobrien

Assignees

@cemms1 cemms1

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

Successfully merging this pull request may close these issues.
3 participants
@cemms1 @prout-bot @domlander