Amaan - Fix Lesson List styling

[AmaanSyed09]

Description

Phase 2 follow-up for the Lesson List page related to the previously merged PR #4528.

The current Lesson List page has inconsistent page-level styling between light mode and dark mode. Dark mode displays the Lesson List content inside a clearly defined container, while light mode does not provide the same visual separation from the surrounding page. The Expand All and Collapse All functionality was also tested and confirmed to work smoothly in both light and dark modes without console errors.

This Phase 2 follow-up improves the Lesson List styling to provide a more consistent container structure across light and dark modes while preserving smooth Expand All and Collapse All functionality and all existing Lesson List behavior.

Related PRS (if any):

Related frontend PR: #4528 – Fix Expand/Collapse All functionality

Related historical PR: #3107

PR #4528 is already merged into development. This PR is a new Phase 2 follow-up and does not modify the historical PR branch.

Main changes explained:

• Improve the Lesson List page styling for better consistency across light and dark modes.
• Provide clearer visual separation between the page background and the main Lesson List content.
• Improve the main content container with consistent spacing, border radius, and border styling.
• Improve the sizing and alignment of page controls for a more consistent layout.
• Preserve existing Lesson List functionality, including filtering, sorting, tags, Expand All, Collapse All, editing, deleting, liking, exporting, and data loading.

How to test:

1. Check out the current PR branch:
   amaan-fix-lesson-list-dark-mode
2. Run npm install if dependencies are not already installed.
3. Run npm run start:local.
4. Clear site data/cache if needed.
5. Log in with an account that can access the Lesson List page.
6. Navigate to:
   http://localhost:5173/bmdashboard/lessonlist
7. Verify the Lesson List light-mode page displays a clearly defined inner container against the surrounding page background.
8. Verify the container padding, border radius, and border display correctly.
9. Switch to dark mode and verify the existing dark-mode container styling remains unchanged.
10. Verify Filter, Sort, Tags, Export Data, Expand All, Collapse All, and lesson-card interactions continue to function correctly in both light and dark mode.

Screenshots or videos of changes:

Before:

After:

Note:

This is a new Phase 2 follow-up to the already merged PR #4528. Additional verified Lesson List Phase 2 UI fixes may be added to this PR as testing continues.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	cf80fbe
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a99ae5df9e30e0008f1caf2
😎 Deploy Preview	https://deploy-preview-5501--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[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

[iAbhi001]

I have tested this PR locally on both Light and Dark modes:

• Verified light mode container structure, padding, and borders against page background.
• Verified dark mode container styling and contrast remain intact.
• Tested "Expand All" / "Collapse All" functionality; lesson cards expand/collapse cleanly with all metadata visible.
• Verified control alignments (Filter, Sort, Export Data).
• Checked DevTools console — no errors or styling conflicts observed.

LGTM! Approved.

[DeMoliT1on]

Hi @AmaanSyed09,

Tested locally on branch amaan-fix-lesson-list-dark-mode and verified all the changes.

Verified Working

• Verified the Lesson List light-mode page displays a clearly defined inner container against the surrounding page background.
• Verified the container padding, border radius, and border display correctly.
• Switched to dark mode and verified the existing dark-mode container styling remains unchanged.
• Verified Filter, Sort, Tags, Export Data, Expand All, Collapse All, and lesson-card interactions continue to function correctly in both light and dark mode.

Screenshots

Approved!

[devangsaraogi]

Tested the current PR locally on /bmdashboard/lessonlist with both Administrator and Volunteer accounts.

Verified the updated Lesson List styling in both light and dark mode. The light-mode page has clear separation between the page background and the main Lesson List container, with the border, spacing, padding, and rounded corners displaying correctly. Dark-mode styling also remains consistent.

I also tested the Filter and Sort controls, Tags, Export Data, Expand All, Collapse All, lesson-card behavior, and responsiveness at a narrower browser width. Everything continued to work as expected without visible layout regressions.

No blocking issues found. Approved.