Show / Hide alignment

[abeddow91]

What does this change?

Updates the alignment for show hide so that

• there is 8px space between the show/hide button and carousel nav buttons when there is no meta
• the controls section (which houses show hide and the carousel nav buttons) only sets content to have space-between spacing when both both components are available and neither are hidden.

Why?

The ability to show/hide containers is behind a sign in flag. The component is visually hidden with a class when the user is signed out. However the css still considers the controls container to have 2 children and so add space-between. By adding an additional check that neither children are hidden we ensure this rule is only applied when both children are rendered and visible.

These are design tweaks that have come out of QA.

This fixes both https://trello.com/c/flwh5FTG and https://trello.com/c/Pgh4oOhe

Screenshots

before	after

[github-actions]

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]

Size Change: +12 B (0%)

Total Size: 888 kB

ℹ️ View Unchanged

Filename	Size	Change
dotcom-rendering/dist/1076.client.web.********************.js	3.41 kB	0 B
dotcom-rendering/dist/1101.client.web.********************.js	4.83 kB	0 B
dotcom-rendering/dist/1262.client.web.********************.js	4.48 kB	0 B
dotcom-rendering/dist/1401.client.web.********************.js	441 B	0 B
dotcom-rendering/dist/1427.client.web.********************.js	4.94 kB	0 B
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/2188.client.web.********************.js	6.52 kB	0 B
dotcom-rendering/dist/2444.client.web.********************.js	2.67 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/342.client.web.********************.js	4.18 kB	0 B
dotcom-rendering/dist/3524.client.web.********************.js	3.51 kB	0 B
dotcom-rendering/dist/3769.client.web.********************.js	22.7 kB	0 B
dotcom-rendering/dist/3789.client.web.********************.js	3.58 kB	0 B
dotcom-rendering/dist/39.client.web.********************.js	3.07 kB	-6 B (-0.19%)
dotcom-rendering/dist/3937.client.web.********************.js	3.86 kB	0 B
dotcom-rendering/dist/4170.client.web.********************.js	16.3 kB	0 B
dotcom-rendering/dist/4285.client.web.********************.js	6.28 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/4878.client.web.********************.js	8.08 kB	0 B
dotcom-rendering/dist/4943.client.web.********************.js	3.69 kB	0 B
dotcom-rendering/dist/5095.client.web.********************.js	4.17 kB	0 B
dotcom-rendering/dist/5223.client.web.********************.js	3.27 kB	0 B
dotcom-rendering/dist/5598.client.web.********************.js	4.49 kB	0 B
dotcom-rendering/dist/6021.client.web.********************.js	11.1 kB	0 B
dotcom-rendering/dist/6061.client.web.********************.js	3.63 kB	0 B
dotcom-rendering/dist/6073.client.web.********************.js	3.53 kB	0 B
dotcom-rendering/dist/6110.client.web.********************.js	3.55 kB	0 B
dotcom-rendering/dist/6163.client.web.********************.js	3.83 kB	0 B
dotcom-rendering/dist/6577.client.web.********************.js	5.41 kB	0 B
dotcom-rendering/dist/6627.client.web.********************.js	10.4 kB	0 B
dotcom-rendering/dist/6876.client.web.********************.js	2.67 kB	0 B
dotcom-rendering/dist/6882.client.web.********************.js	13.1 kB	0 B
dotcom-rendering/dist/6903.client.web.********************.js	3.21 kB	0 B
dotcom-rendering/dist/6931.client.web.********************.js	2.63 kB	0 B
dotcom-rendering/dist/6940.client.web.********************.js	526 B	0 B
dotcom-rendering/dist/7116.client.web.********************.js	23 kB	0 B
dotcom-rendering/dist/7350.client.web.********************.js	3.32 kB	0 B
dotcom-rendering/dist/7364.client.web.********************.js	3.22 kB	0 B
dotcom-rendering/dist/7540.client.web.********************.js	2.72 kB	0 B
dotcom-rendering/dist/7541.client.web.********************.js	12.5 kB	0 B
dotcom-rendering/dist/7544.client.web.********************.js	4.88 kB	0 B
dotcom-rendering/dist/7546.client.web.********************.js	7.37 kB	0 B
dotcom-rendering/dist/7861.client.web.********************.js	619 B	0 B
dotcom-rendering/dist/8030.client.web.********************.js	4.19 kB	0 B
dotcom-rendering/dist/8067.client.web.********************.js	3.39 kB	0 B
dotcom-rendering/dist/8209.client.web.********************.js	3.64 kB	0 B
dotcom-rendering/dist/8592.client.web.********************.js	157 B	0 B
dotcom-rendering/dist/9072.client.web.********************.js	2.61 kB	0 B
dotcom-rendering/dist/9242.client.web.********************.js	3.76 kB	0 B
dotcom-rendering/dist/9288.client.web.********************.js	2.51 kB	0 B
dotcom-rendering/dist/9362.client.web.********************.js	20.3 kB	0 B
dotcom-rendering/dist/9397.client.web.********************.js	13.8 kB	0 B
dotcom-rendering/dist/9558.client.web.********************.js	3.53 kB	0 B
dotcom-rendering/dist/9665.client.web.********************.js	4.05 kB	0 B
dotcom-rendering/dist/9735.client.web.********************.js	4.46 kB	0 B
dotcom-rendering/dist/9766.client.web.********************.js	3.41 kB	0 B
dotcom-rendering/dist/9790.client.web.********************.js	3.58 kB	0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js	6.99 kB	+18 B (+0.26%)
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	424 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.76 kB	0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js	6.5 kB	0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js	2 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	37.2 kB	0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js	1.97 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.66 kB	0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js	7.82 kB	0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js	5.16 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/CrosswordComponent-importable.client.web.********************.js	285 B	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.82 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.5 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.94 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.38 kB	0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js	6.26 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.98 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	783 B	0 B
dotcom-rendering/dist/index.client.web.********************.js	44.9 kB	0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js	2.9 kB	0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js	853 B	0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js	8.55 kB	0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js	3.75 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.55 kB	0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js	6.38 kB	0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js	436 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.81 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.61 kB	0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js	5.96 kB	0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js	2.69 kB	0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js	3.85 kB	0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js	5.95 kB	0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js	5.12 kB	0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js	5.34 kB	0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js	3.72 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	749 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.75 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.11 kB	0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js	8.11 kB	0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js	6.39 kB	0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js	4.15 kB	0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js	4.13 kB	0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js	4.1 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.92 kB	0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js	485 B	0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js	919 B	0 B
dotcom-rendering/dist/shimport.client.web.********************.js	2.8 kB	0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js	920 B	0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js	2.1 kB	0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js	4.46 kB	0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js	5.56 kB	0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js	6.4 kB	0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js	4.38 kB	0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js	4.84 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.13 kB	0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js	8.14 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.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	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.5 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	5.97 kB	0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js	2.78 kB	0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js	4.27 kB	0 B

_{compressed-size-action}

[github-actions]

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

All deployment options

• Deploy build 40326 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 40326 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 16136 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 16136 of dotcom:rendering-all to CODE
• Deploy parts of build 16136 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[Georges-GNM]

LGTM checking locally.

The ticket referred to mobile breakpoint where the Hide was lower than the container title; I think it's also slightly off on tablet though if there's the carousel buttons (which I'm assuming we'd want to adjust too, either as part of this PR or another):

[prout-bot]

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