Rohith | Fix dropdown options visibility in Weekly Summaries report

[Nayakar-Rohith]

Description

This PR resolves an issue in the Weekly Summaries Report screen where the dropdown component (used to select team codes and colors) was only showing 4 options. The issue was introduced after the styling was migrated to SCSS modules. The original .options class was no longer applying due to CSS scoping in modules, which limited the dropdown height and visibility. A fix was implemented by using the :global selector inside the .multiSelectFilter class to properly target the .options dropdown container.

Fixes # (bug list priority medium 2.4.3)

Related PRS (if any):

None
…

Main changes explained:

• Updated WeeklySummariesReport.module.scss to apply global styles to .options container inside .multiSelectFilter
• Restored max-height and scroll behavior to dropdown content
• Resolved issue with dropdown only showing limited number of options
  …

How to test:

1. git checkout Rohith_fix_dropdown_limit
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to Dashboard → Reports → Weekly Summaries
6. Click the dropdown to select team codes or colors
7. Confirm that:
   All options are visible
   Scroll works correctly
   The dropdown doesn’t cut off at 4 items
   Works in dark mode

Screenshots or videos of changes:

Before:
https://www.loom.com/share/129be3455a0c48218d884e9466a9103a?sid=b6e818df-e50a-499d-bc0a-843bf1acbcd4
After:
https://www.loom.com/share/450bfb08a49c45bfaeddd7d4ae006971?sid=91dcbd6d-cf5d-4f2b-9fc4-fd5e0d6413e8

Note:

The fix was confirmed to work using the :global selector in SCSS module, allowing the dropdown to display the full list with custom scrollbar styling. No functional code was modified, only scoped styles were corrected.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	1d285ff
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/67f5b107c39b9d00081533c9
😎 Deploy Preview	https://deploy-preview-3358--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[rsripathi2906]

Checked out the branch, ran npm install, and tested the fix locally. The dropdown in the Weekly Summaries Report now displays all options correctly, with proper scrolling behavior. No cutoff at 4 items, and everything works as expected in both light and dark mode.

Screen.Recording.2025-04-03.125551_1.mp4

[nikhilpittala16]

I have tested the PR and everything works as expected.

PR.vid.11.mp4

[palankigreeshma1109]

I have reviewed this PR and followed the all steps mentioned in the PR and navigated to Dashboard → Reports → Weekly Summaries and found that search dropdown doesn't cut off at 4 items and is scrollable and works as expected in dark mode also.

Below are the screenshots for your reference.