fix: show module as a section when there is only 1 module

[HarshitVerma109]

Proposed change

Resolves #3083

Display single module as a section instead of a nested card.

Changes

• Remove SecondaryCard wrapper when only 1 module exists
• Inline contributor rendering in SingleModuleCard
• Update styling to use section background instead of card borders/shadows
• Update tests to match new implementation

Checklist

• Required: I followed the contributing workflow
• Required: I verified that my code works as intended and resolves the issue as described
• Required: I ran make check-test locally: all warnings addressed, tests passed
• I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

Summary by CodeRabbit

• New Features

  • Show more/less toggle for mentor and mentee lists when contributors exceed the initial display.

• UI/UX Improvements

  • Inline contributor avatars and unified contributor layout.
  • Single-module pages omit extra wrapper; multiple modules grouped under a "Modules" section.
  • Improved headings (module title as h2) and folder icon in headers.
  • Profile links adapt to private vs. public view contexts.

• Bug Fixes

  • Missing description now shows a fallback; mentors section omitted when empty.

• Tests

  • Expanded coverage for contributor rendering, toggles, URL behaviors, headings, admin context, and edge cases.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Conditional rendering in CardDetailsPage now omits the SecondaryCard when a program has exactly one module. SingleModuleCard was refactored to render mentors/mentees inline with avatar links, a show-more toggle, and unified contributor URL logic. Tests and mocks were updated accordingly.

Changes

Cohort / File(s)	Summary
Tests frontend/__tests__/unit/components/SingleModuleCard.test.tsx	Reworked mocks and assertions: added fireEvent, mocked next/image, simplified next/link, mocked getMemberUrl, replaced contributor mock with ShowMoreButton mock, added mockModuleWithManyMentors, and updated tests for inline avatars, show-more toggle, heading semantics, description fallback, and private/public member URL handling.
SingleModuleCard component frontend/src/components/SingleModuleCard.tsx	Added local state (showAllMentors, showAllMentees) and maxInitialDisplay; introduced renderContributors helper to render inline avatar links (uses getMemberUrl/programKey logic), integrated ShowMoreButton toggle, updated markup and headings, and adjusted imports (e.g., Image, upperFirst).
CardDetailsPage conditional wrapper frontend/src/components/CardDetailsPage.tsx	Conditional rendering: render ModuleCard directly when program has exactly one module; render ModuleCard inside a SecondaryCard with folder icon and title "Modules" when multiple modules.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Improve Module Card: Show mentors/mentee avatars & change grid to 3 columns #3296 — Direct changes to SingleModuleCard.tsx for contributor rendering and avatar handling that overlap this refactor.
• Remove data-testid from production components #3341 — Related updates to ShowMoreButton usage and tests/mocks affecting how show-more is queried in tests.
• UI/ux mentorship program update #2244 — Prior modifications to SingleModuleCard and CardDetailsPage structure that may overlap with this conditional wrapper and admin/menu changes.

Suggested reviewers

• arkid15r
• kasya

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: show module as a section when there is only 1 module' directly matches the main objective of the PR—to display a single module as a section without the outer SecondaryCard wrapper.
Description check	✅ Passed	The description clearly explains the proposed change, references the resolved issue (#3083), and details the specific implementation changes including the removal of SecondaryCard wrapper, inline contributor rendering, and test updates.
Linked Issues check	✅ Passed	The PR implementation fully addresses issue #3083 by conditionally rendering ModuleCard without the outer SecondaryCard wrapper when only one module exists, removing the double-boxing effect and making it a top-level section.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the objective: CardDetailsPage.tsx conditional wrapper logic, SingleModuleCard inline contributor rendering, and corresponding test updates. No extraneous modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[HarshitVerma109]

@kasya, please review it and let me know if any changes are required.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/src/components/SingleModuleCard.tsx`:
- Around line 60-109: The renderContributors function signature currently
includes an unused showAll parameter; remove showAll from the signature of
renderContributors and from its type list (Contributor[] | undefined,
displayContributors..., label, toggleShowAll, isMentee) so the function only
accepts the parameters it uses, and update any call sites that pass showAll to
stop passing that argument (ensure calls still pass toggleShowAll and isMentee
in the correct order). Also update any related type annotations or usages (e.g.,
props or local callers) to match the new parameter list to avoid TypeScript
errors.

[kasya]

@HarshitVerma109 this looks good 👍🏼
Pushed tiny change to update one icon.

Thanks!

[kasya]

@HarshitVerma109 could you please resolve conflicts and check that tests pass so we could merge this in?

[HarshitVerma109]

@kasya, please review it and let me know if any changes are required.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

❌ Patch coverage is 74.07407% with 7 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (main@8229c5c). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
frontend/src/components/SingleModuleCard.tsx	76.92%	1 Missing and 5 partials ⚠️
frontend/src/components/CardDetailsPage.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3402   +/-   ##
=======================================
  Coverage        ?   85.56%           
=======================================
  Files           ?      461           
  Lines           ?    14246           
  Branches        ?     1902           
=======================================
  Hits            ?    12190           
  Misses          ?     1679           
  Partials        ?      377           

Flag	Coverage Δ
backend	84.47% <ø> (?)
frontend	88.60% <74.07%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
frontend/src/components/CardDetailsPage.tsx	88.00% <0.00%> (ø)
frontend/src/components/SingleModuleCard.tsx	81.63% <76.92%> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8229c5c...4db1f15. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kasya]

@HarshitVerma109 Great work! Thanks!