trying to make all of the card layouts be in sync with one another

[marcellamaki]

Summary

Following up on some regressions @thanksameeelian noticed with her work in #11515 and expanding on that work just a tiny bit for uniformity

References

Description	Screenshot
"Mobile" or narrow screen: single card wide in all sections; "recent" has 3 cards per "show more"
"Tablet" sized screen: 2 cards wide in all sections; "recent" has 4 cards (2x2 grid) and then adds an even number more in a 2x2 grid with "show more"
"Normal" browser screen: 3 cards wide in all sections, "recent" increments rows by multiples of 3
"Narrow" browser screen: reduced side panel width (slightly different than the spec) at a higher breakpoint, such that the cards are less narrow
"Wide" browser screen: Up to 4 cards, with a max grid width of 1700px
Topics Page: Defaults to 4 cards/4 columns, with a max grid width of 170px

|

Reviewer guidance

…

---

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.0b10.dev0_git.30.gd339a1ba.pex
Windows Installer (EXE)	kolibri-0.16.0b10.dev0+git.30.gd339a1ba-unsigned.exe
Debian Package	kolibri_0.16.0b10.dev0+git.30.gd339a1ba-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b10.dev0+git.30.gd339a1ba-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b10.dev0+git.30.gd339a1ba-0.1.0-debug.apk
TAR file	kolibri-0.16.0b10.dev0+git.30.gd339a1ba.tar.gz
WHL file	kolibri-0.16.0b10.dev0+git.30.gd339a1ba-py2.py3-none-any.whl

[marcellamaki]

@rtibbles this is actually ready for review now

[rtibbles]

On an ultra wide screen both of these look odd, but the recent cards look odder:

Topic display leaves blank spaces, rather than filling them in, and instead you have to click 'show more', would be better to fill out the row:

Otherwise, I can't spot any other issues. The latter is far more important than the ultrawide.

[rtibbles]

I spy an errant class - and a little cleaning up of hanging items on the topics page (if that's not too far a stretch).

[rtibbles]

As someone coming to look at this, I do find the numCols calculations significantly easier to grok in terms of intention than the rather abstract 'gridType' - I do hope we can get rid of this in future.

[marcellamaki]

This wasn't actually an intentional doing away of numCols - the code there wasn't doing anything. I would be very happy to refactor it back to use numCols as it had been previously.

[rtibbles]

Yes - I could see that it was a no-op, as the prop didn't exist on the component. This was more of an expression of an aspiration that we use a 'desired number of columns' in future grid work!

[marcellamaki]

Follow up for the ultrawide screens here #11653

[rtibbles]

Code changes look right, manual testing checks out - it seems that the 'hanging cards' were actually a non-applicable show more! A 2 year old bug is squashed!