fix: Card items overflow out of cards

[Wassaf001]

Checklist:

• [x] I've thoroughly self-reviewed my changes
• [ ] I've added tests for my changes, unless they affect admin-only areas (or are otherwise not worth testing)
• [ ] I've verified any visual changes using Percy (add a commit with [percy] in the message to trigger)

Summary by CodeRabbit

• New Features
  • The course progress display now highlights up to five courses, prioritizing completed and recently active ones for a clearer overview.
• Bug Fixes
  • Removed a test related to hiding private courses from user profiles to streamline testing.

[coderabbitai[bot]]

Walkthrough

The changes update the course progress list component by modifying its data source. The Handlebars template now iterates over a new computed property languagesToDisplay instead of @courseParticipations. The component logic is enhanced with a new constant MAX_LANGUAGES_TO_DISPLAY and a computed getter that sorts and combines completed and incomplete course participations based on completion and last submission dates before limiting the results. Additionally, a test case verifying exclusion of private courses from the user profile was removed.

Changes

File(s)	Change Summary
app/components/user-page/course-progress-list-item/index.hbs	Updated iteration source from @courseParticipations to this.languagesToDisplay.
app/components/user-page/course-progress-list-item/index.js	Added constant MAX_LANGUAGES_TO_DISPLAY = 5 and a computed property languagesToDisplay that sorts and combines completed and incomplete participations based on date thresholds.
tests/acceptance/view-user-profile-test.js	Removed test case verifying private courses are excluded from user profile.

Sequence Diagram(s)

sequenceDiagram
    participant T as Template (index.hbs)
    participant C as Component (index.js)
    participant D as Data (Course Participations)

    T ->> C: Request languagesToDisplay for rendering
    C ->> D: Retrieve completed participations
    D -->> C: Return completed items
    C ->> D: Retrieve incomplete participations
    D -->> C: Return incomplete items
    C ->> C: Sort completed by completion date (desc)
    C ->> C: Sort incomplete by last submission date (desc)
    C ->> C: Combine items based on MAX_LANGUAGES_TO_DISPLAY
    C -->> T: Provide languagesToDisplay array

Poem

🐇 Hopping through code, so spry and bright,
Sorting languages with all my might.
Completed or not, I choose with care,
Five to display, shown with flair.
Progress shines in colors true,
A rabbit’s joy in what we do! 🌈✨

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between d0adbb661b2de1d9e71e286bf7c064ca418562bc and f36c99a350471ed7f9963ba3ffba2ae691feeb94.

📒 Files selected for processing (1)

• tests/acceptance/view-user-profile-test.js (0 hunks)

💤 Files with no reviewable changes (1)

• tests/acceptance/view-user-profile-test.js

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[rohitpaulk]

@ryan-gang could you review this please?

[ryan-gang]

Hey @Wassaf001 you can take a look at this PR. https://github.com/codecrafters-io/frontend/pull/2705 You can work on top of that if you wish.

[Wassaf001]

ok will do it at earliest just wait till Sunday.

[Wassaf001]

I am trying to pause the test using : await pauseTest(); but it won't work as expected, before it was working fine.

Any guidance please.

[Wassaf001]

it is working using module filter on tests page

[Wassaf001]

done, if any changes required let me know

[ryan-gang]

Linter is failing, can you also revert all changes done to tests/acceptance/view-user-profile-test.js ?

[Wassaf001]

Is there anything else, I need to do? Why is the linter taking so long to show results.

[ryan-gang]

@Wassaf001 CI jobs won't run without approval from members with write access. You can just run it locally: npm run lint:fix.

[Wassaf001]

@Wassaf001 CI jobs won't run without approval from members with write access. You can just run it locally: npm run lint:fix.

ok understood

[ryan-gang]

https://frontend-dqfrgbyfu.ccio.dev/users/rohitpaulk

[Wassaf001]

Fixed It. Please check.

[Wassaf001]

Why are the tests failing? Please guide me on what to do next.

[ryan-gang]

This is an issue with Codecov on forked repos, will have to update our CI tests to accommodate for this. Once I fix the CI, (hopefully this week), will review.

[Wassaf001]

ok thank you

[codecov[bot]]

Codecov Report

:x: Patch coverage is 77.77778% with 2 lines in your changes missing coverage. Please review. :white_check_mark: All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...nents/user-page/course-progress-list-item/index.js	77.77%	2 Missing :warning:

:loudspeaker: Thoughts on this report? Let us know!

[codecov[bot]]

Bundle Report

Changes will decrease total bundle size by 1.34kB (-0.0%) :arrow_down:. This is within the configured threshold :white_check_mark:

Detailed changes

Bundle name	Size	Change
client-array-push	36.58MB	-1.34kB (-0.0%) :arrow_down:

Affected Assets, Files, and Routes:

view changes for bundle: client-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/chunk.*.js	-1.25kB	2.84MB	-0.04%
assets/chunk.*.js	-16 bytes	26.44kB	-0.06%
assets/chunk.*.js	-66 bytes	26.46kB	-0.25%

[Wassaf001]

thank you

[ryan-gang]

I'll still have to fix our CI tests for forked repos, before I can merge this. Will get to it on Monday.

[Wassaf001]

ok

[ryan-gang]

Hey @Wassaf001 can you rebase this on top of the main branch once ? I have updated our CI workflow for forked repos.

[Wassaf001]

will do in the evening, in office right now

[Wassaf001]

I by mistake deleted the clone repo, and now when I recloned it and checked out this pr, I am not able to rebase it. Please help.

I am not very comfortable with rebasing and these concepts.

[Wassaf001]

I tried git pull --rebase and now my local, has all the changes from original, but nothing to push.

What next?

[Wassaf001]

I tried it and rebased it from what I learned.

Hope it works. Let me know.

[ryan-gang]

There seems to be another CI issue. Please give me some time to figure out what the issue is.

[Wassaf001]

ok

[Wassaf001]

any update to do on this?

[ryan-gang]

Yep, I have some bandwidth currently, will work on the CI thing. In the meantime can you rebase on top of main and force push once ? That will trigger CI again. Do you remember why the unrelated test seems to be removed ? If not please add it back.