limit number of cards visible in "Recent"

[thanksameeelian]

Summary

the "Recent" section in Learn > Library was initially displaying up to 12 recent items, and never displaying "View more" if there were 13+ items (due to a small, additional bug).

this PR changes the "Recent" section to almost always initially display 3 cards (4 at a specific window size), rendering a "Show more" button if there are additional items. Once all 12 items in the initial BE response are shown, if there are still more recent items, a "View more" button will now render and allow the option to display those as well.

Before

User with 13 recent items - 12 shown with no option to see the 13th

(sidenav weirdness due to screenshot app)

After

Window larger than breakpoint 2

Window at breakpoint 2

Window smaller than breakpoint 2

User with 13 recent items, with "Show more" clicked

User with 13 recent items with "Show more" & "View more" clicked

References

Resolves #11438

Reviewer guidance

• all changes have taken place in Learn > Library > "Recent" section
• note behavior & appearance of cards in "Recent" section as a user with:
  • 3-4 recently viewed items ==> if window size is at anything but window breakpoint 2 (narrow-medium size), user should see 3 cards displayed in section, with no "Show more" or "View more" buttons. if at breakpoint 2, the same applies but for 4 cards.
  • 5-12 recently viewed items ===> 3-4 cards should be displayed based on window size as described above, with a "Show more" button rendered that, when clicked, displays all items, up to and including the 12th.
  • 13+ recently viewed items ===> same expected behavior as above, but once "Show more" is pressed and 12 cards are visible, "View more" button should render and display the 13th item and beyond once clicked.

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b8.dev0_git.18.g7014bf4a.pex
Windows Installer (EXE)	kolibri-0.16.0b8.dev0+git.18.g7014bf4a-unsigned.exe
Debian Package	kolibri_0.16.0b8.dev0+git.18.g7014bf4a-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b8.dev0+git.18.g7014bf4a-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b8.dev0+git.18.g7014bf4a-0.1.0-debug.apk
TAR file	kolibri-0.16.0b8.dev0+git.18.g7014bf4a.tar.gz
WHL file	kolibri-0.16.0b8.dev0+git.18.g7014bf4a-py2.py3-none-any.whl

[marcellamaki]

This looks good @thanksameeelian - nice work! Manual QA checks out and the code read through looks okay. One small request, which is technically outside of scope of this but would be nice to fix, is to add a max-width for wide screens which seems to have been lost somewhere along the way with refactoring. Don't worry about the other places for now, but if you could add it for the content cards, that would be great. You can see the description here. My first thought is to add it on the LibraryAndChannelBrowserMainContentGrid and check if it works for both "recent" on the library page as well as on the topics page. That could give us a lot of bang for our buck. If that gets weird, you can just go ahead and
do it directly on the ResumableContentGrid and not worry about the other places for now, since this is already a bit of a reach. Thanks! https://www.figma.com/file/uiZuCIqh2KYvBUfbCiJyyA/Hybrid-Learning?type=design&node-id=9-2&mode=design&t=fNsWatcu1iV90BrI-0

After that I'll do a final review and this should be good to go!

[marcellamaki]

LGTM @thanksameeelian! Thank you for adding in that last update for the max width