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

simplify inner scrolling behaviour, use overflow auto to hide scrollbars #12901

Merged
merged 2 commits into from
Nov 22, 2024
Merged

simplify inner scrolling behaviour, use overflow auto to hide scrollbars #12901

merged 2 commits into from
Nov 22, 2024

Conversation

HarryFischer
Copy link
Contributor

@HarryFischer HarryFischer commented Nov 22, 2024 •
edited
Loading

What does this change?

Apply scroll height to the list within the details and use overflow auto instead of scroll so that users with scrollbars always on don't see empty scrollbars
Also made the Jump to... bold weight as it gets a little lost in the page

Why?

Better experience

@HarryFischer HarryFischer requested a review from a team as a code owner November 22, 2024 14:45
@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 Nov 22, 2024 •
edited
Loading

Deploy build 14917 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 22, 2024 •
edited
Loading

Size Change: +3 B (0%)

Total Size: 946 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/1261.client.web.********************.js 1.89 kB 0 B
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1483.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/1559.client.web.********************.js 11.2 kB 0 B
dotcom-rendering/dist/1621.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/1984.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/2185.client.web.********************.js 8.09 kB 0 B
dotcom-rendering/dist/222.client.web.********************.js 6.16 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/2368.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/2611.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/2645.client.web.********************.js 6.05 kB 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/2700.client.web.********************.js 2.86 kB 0 B
dotcom-rendering/dist/2705.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/2751.client.web.********************.js 6.01 kB 0 B
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/2923.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/2927.client.web.********************.js 441 B 0 B
dotcom-rendering/dist/3004.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/302.client.web.********************.js 4.52 kB 0 B
dotcom-rendering/dist/3060.client.web.********************.js 3.79 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/3450.client.web.********************.js 6.17 kB 0 B
dotcom-rendering/dist/3459.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/3499.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/3613.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/3634.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3839.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/4020.client.web.********************.js 5.88 kB 0 B
dotcom-rendering/dist/4120.client.web.********************.js 11.1 kB 0 B
dotcom-rendering/dist/4132.client.web.********************.js 3.55 kB 0 B
dotcom-rendering/dist/4215.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/4326.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/4364.client.web.********************.js 13 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4553.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/4556.client.web.********************.js 4.15 kB 0 B
dotcom-rendering/dist/4628.client.web.********************.js 654 B 0 B
dotcom-rendering/dist/4741.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/4853.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/5019.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/5119.client.web.********************.js 3.03 kB 0 B
dotcom-rendering/dist/5209.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/5222.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/5367.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/5394.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/5400.client.web.********************.js 4.9 kB 0 B
dotcom-rendering/dist/5410.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5695.client.web.********************.js 2.59 kB 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/576.client.web.********************.js 11.2 kB 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/6042.client.web.********************.js 4.04 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/632.client.web.********************.js 6.86 kB 0 B
dotcom-rendering/dist/6390.client.web.********************.js 529 B 0 B
dotcom-rendering/dist/647.client.web.********************.js 3.64 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/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/6662.client.web.********************.js 523 B 0 B
dotcom-rendering/dist/6681.client.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/6976.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/6990.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/7045.client.web.********************.js 5.13 kB 0 B
dotcom-rendering/dist/7047.client.web.********************.js 44.3 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7122.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/7327.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/7392.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/7440.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/7621.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/7748.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/7807.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/83.client.web.********************.js 750 B 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/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8811.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/9039.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 0 B
dotcom-rendering/dist/9203.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/9395.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/9399.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/9460.client.web.********************.js 7.27 kB 0 B
dotcom-rendering/dist/948.client.web.********************.js 5.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/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9810.client.web.********************.js 4.02 kB 0 B
dotcom-rendering/dist/9835.client.web.********************.js 647 B 0 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6 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.71 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 423 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.17 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.46 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/AudioPlayerWrapper-importable.client.web.********************.js 6.33 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.97 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.22 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.97 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.42 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 541 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.21 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.98 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.74 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.38 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 966 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.44 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 345 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.62 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.7 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.41 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 782 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.2 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 852 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.56 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.25 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.86 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.62 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 4.57 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.52 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.27 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.97 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.83 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.07 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.33 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 748 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.96 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/ScrollableFeature-importable.client.web.********************.js 7.05 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.08 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.59 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 794 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.71 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 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/SlideshowCarousel-importable.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.61 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.23 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.67 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.17 kB +4 B (+0.13%)
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.24 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.72 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.04 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.65 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 6.29 kB 0 B

compressed-size-action

@github-actions GitHub Actions
Copy link

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

All deployment options

From guardian/actions-riff-raff.

@HarryFischer HarryFischer added the run_chromatic Runs chromatic when label is applied label Nov 22, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 22, 2024
@HarryFischer HarryFischer merged commit d7c8e16 into main Nov 22, 2024
32 checks passed
@HarryFischer HarryFischer deleted the hf/sticky-nav-scroll branch November 22, 2024 15:43
@prout-bot
Copy link

Seen on PROD (merged by @HarryFischer 10 minutes and 7 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

@rowannekabalan rowannekabalan rowannekabalan approved these changes

@JamieB-gu JamieB-gu JamieB-gu 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.
4 participants
@HarryFischer @prout-bot @JamieB-gu @rowannekabalan