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

Correctly align outer sublinks and livelinks #13087

Merged
merged 3 commits into from
Jan 9, 2025
Merged

Correctly align outer sublinks and livelinks #13087

merged 3 commits into from
Jan 9, 2025

Conversation

abeddow91
Copy link
Contributor

What does this change?

Adds flex-basis: 100% to outer card content that includes liveblog links or sublinks.

Why?

Outer content exists outside the card layout and currently gets pushed to the bottom due to the card's flex-basis: 100%. This creates visual misalignment when cards have varying numbers of links.

By applying flex-basis: 100% to the outer content, it takes up the remaining space instead of the card, ensuring links are properly aligned across cards.

Screenshots

Before After
before after

@abeddow91 abeddow91 requested a review from a team as a code owner January 7, 2025 10:59
@abeddow91 abeddow91 requested review from Georges-GNM and removed request for a team January 7, 2025 10:59
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 7, 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.

@abeddow91 abeddow91 requested a review from jamesmockett January 7, 2025 10:59
@abeddow91 abeddow91 self-assigned this Jan 7, 2025
@github-actions GitHub Actions
Copy link

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

Deploy build 15624 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

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

Size Change: +33 B (0%)

Total Size: 891 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1076.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/1262.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/1301.client.web.********************.js 4.06 kB 0 B
dotcom-rendering/dist/1401.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/1424.client.web.********************.js 11.5 kB +35 B (+0.3%)
dotcom-rendering/dist/1477.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/1714.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1891.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/1908.client.web.********************.js 4.25 kB 0 B
dotcom-rendering/dist/2188.client.web.********************.js 6.21 kB 0 B
dotcom-rendering/dist/2482.client.web.********************.js 44.8 kB 0 B
dotcom-rendering/dist/280.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/3213.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/3366.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/342.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/3473.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/3789.client.web.********************.js 3.42 kB 0 B
dotcom-rendering/dist/39.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/3937.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/4237.client.web.********************.js 3.22 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4684.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/4714.client.web.********************.js 6.15 kB 0 B
dotcom-rendering/dist/5095.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/5550.client.web.********************.js 11.2 kB 0 B
dotcom-rendering/dist/5721.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/5922.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/6021.client.web.********************.js 11 kB 0 B
dotcom-rendering/dist/6061.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/6080.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/6398.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/6574.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/6627.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/6876.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/6880.client.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/6882.client.web.********************.js 12.8 kB 0 B
dotcom-rendering/dist/6903.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/6931.client.web.********************.js 2.56 kB 0 B
dotcom-rendering/dist/6940.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/7026.client.web.********************.js 5.41 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/719.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/7350.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/7351.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/7460.client.web.********************.js 6.85 kB 0 B
dotcom-rendering/dist/7513.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/7540.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/7546.client.web.********************.js 7.38 kB 0 B
dotcom-rendering/dist/7861.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/8030.client.web.********************.js 3.36 kB 0 B
dotcom-rendering/dist/8067.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/8920.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/895.client.web.********************.js 5.14 kB 0 B
dotcom-rendering/dist/9242.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/9288.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/9558.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/9646.client.web.********************.js 6.32 kB 0 B
dotcom-rendering/dist/9665.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/9735.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/9766.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/9771.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/9995.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6.31 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.85 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 423 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.63 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.55 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.59 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.32 kB 0 B
dotcom-rendering/dist/AuEoy2024Wrapper-importable.client.web.********************.js 5.52 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.86 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.75 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.66 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 8.09 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.14 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 538 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.93 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.81 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 3.49 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.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.8 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 343 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.37 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.24 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.4 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.95 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.56 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 783 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 44.9 kB -2 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.47 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.68 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.21 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 434 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.53 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.55 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.05 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.87 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.67 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.86 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.04 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.65 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 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 468 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.74 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.01 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 4.58 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.61 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.35 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.32 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 6.5 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 794 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 730 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.55 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.83 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.36 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.83 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.68 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.16 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 8.13 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.46 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.5 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 9.29 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.49 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/UsEoy2024Wrapper-importable.client.web.********************.js 6.03 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.88 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.78 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 3.61 kB 0 B

compressed-size-action

@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Jan 8, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 8, 2025
@abeddow91 abeddow91 force-pushed the ab/outer-content-flex-basis branch from 3117ef4 to f9d20f0 Compare January 8, 2025 09:29
@github-actions GitHub Actions
Copy link

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

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

All deployment options

From guardian/actions-riff-raff.

@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Jan 8, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 8, 2025
@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Jan 9, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 9, 2025
@abeddow91 abeddow91 merged commit b3567e9 into main Jan 9, 2025
31 checks passed
@abeddow91 abeddow91 deleted the ab/outer-content-flex-basis branch January 9, 2025 09:44
@prout-bot
Copy link

Seen on PROD (merged by @abeddow91 6 minutes and 51 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

@jamesmockett jamesmockett jamesmockett approved these changes

@Georges-GNM Georges-GNM Awaiting requested review from Georges-GNM

Assignees

@abeddow91 abeddow91

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
@abeddow91 @prout-bot @jamesmockett