fix: improve mobile responsiveness on issues page

[Ani07-05]

Proposed change

Resolves #4568

The Issues page header was using flex items-center justify-between at all screen sizes, causing the filter dropdowns (Label, Deadline) to overlap the page title on narrow viewports (e.g. Galaxy Z Fold).

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

• Style
  • Improved responsive layout for the issues page header and filters: title and filter controls now stack vertically on small screens and align horizontally on larger screens.
  • Filter controls adapt sizing responsively so inputs use full width on mobile and a fixed, consistent width on larger displays for better usability.

Walkthrough

The Issues page header/filter bar was changed to a responsive flex layout: title and filters stack on small screens and align horizontally on larger screens. Label and Deadline Select triggers use rounded-none and become full-width on small screens while retaining fixed widths on larger screens.

Changes

Responsive Issues page header layout

Layer / File(s)	Summary
Header container and filter wrapper layout frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx	Top header changed to a responsive flex layout that stacks vertically on small screens and aligns horizontally on larger screens; deadline filter wrapper changed from inline-flex to flex.
Select trigger styling adjustments frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx	Label and Deadline <Select> triggers updated to use rounded-none and be full-width on small screens while keeping fixed widths on larger screens.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• arkid15r
• kasya

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: improve mobile responsiveness on issues page' clearly and concisely describes the main change—improving mobile responsiveness on the issues page, which matches the primary objective of the PR.
Description check	✅ Passed	The description is related to the changeset, explaining that the issues page header was updated to use responsive layout to prevent filter dropdown overlap on narrow viewports, which aligns with the code changes.
Linked Issues check	✅ Passed	The code changes address the core requirement from issue #4568: the header layout was updated to use responsive flex behavior with vertical stacking on small screens and horizontal alignment on larger screens, preventing filter dropdown overlap on mobile viewports.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing mobile responsiveness on the issues page. The layout updates to the header, label filter wrapper, and deadline filter wrapper are all necessary to resolve the overlapping filters problem on narrow viewports.
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 unit tests (beta)

• Create PR with unit tests

---

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.}

[github-actions]

The linked issue must be assigned to the PR author.

[hassaansaleem28]

Hi @Ani07-05, I checked your solution locally and it works nice I think.
Here it is:

BEFORE:

AFTER:
Screencast from 2026-05-20 15-50-37.webm

[hassaansaleem28]

LGTM!

[kasya]

Hi @Ani07-05! Thanks for working on this update.
I reviewed it and have a small request.
Could you update the dropdown buttons for mobile view to stick to the left? Right now caret/dropdown icon shows up in the middle of the dropdown when on the mobile view.

I also noticed that when I am in responsive view on some breakpoint this component breaks and shows 2 different layers of background 🤔 Seems like there's another block under it that has more rounded border but the same color. Could you fix this too?

Thanks!

[Ani07-05]

Hi @Ani07-05! Thanks for working on this update. I reviewed it and have a small request. Could you update the dropdown buttons for mobile view to stick to the left? Right now caret/dropdown icon shows up in the middle of the dropdown when on the mobile view.

I also noticed that when I am in responsive view on some breakpoint this component breaks and shows 2 different layers of background 🤔 Seems like there's another block under it that has more rounded border but the same color. Could you fix this too? Thanks!

sure will implement these changes and resolve the double block issue

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@frontend/src/app/my/mentorship/programs/`[programKey]/modules/[moduleKey]/issues/page.tsx:
- Line 239: The trigger classes were updated for the mobile layout but the
selectorIcon alignment wasn’t—update the component props where you set trigger
to also include an explicit mobile-first selectorIcon class so the caret is
positioned correctly on small screens (e.g., add a selectorIcon prop alongside
trigger with a mobile-first alignment class then override for larger screens);
apply this same selectorIcon change to both occurrences where trigger is set
(the instances around the existing trigger prop at the previous and later call
sites).
- Line 230: The wrapper div that renders the background uses the classes
"bg-gray-200 dark:bg-[`#323232`]" (and rounded/overflow styling) and the trigger
elements repeat the same background, causing a double-layer artifact; remove the
duplicate background classes (specifically "bg-gray-200" and "dark:bg-[`#323232`]"
— leave rounded/overflow if needed) from the trigger elements referenced in the
file (the trigger elements near the wrapper class "flex h-12 w-full items-center
overflow-hidden rounded-lg bg-gray-200 dark:bg-[`#323232`] sm:w-auto" and the
other occurrences noted) so only the wrapper provides the background/shape.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 5143138c-b0f6-4ce1-a747-0de6ab87e6f2

📥 Commits

Reviewing files that changed from the base of the PR and between 827137d and 9687632.

📒 Files selected for processing (1)

• frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx

[Ani07-05]

have addressed them , is this fine @kasya ?

[coderabbitai]

♻️ Duplicate comments (1)

frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx (1)

240-240: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

SelectorIcon positioning still doesn't match reviewer's mobile-left request.

While selectorIcon is now explicitly set (progress from the past review), using right-3 positions the caret on the right at all screen sizes. The reviewer requested the caret stick to the left on mobile, which requires responsive positioning.

Suggested fix using flex ordering

Apply the mobile-first flex ordering approach for both Select components:

                    trigger: 'bg-transparent pl-0 text-nowrap rounded-none w-full sm:w-40',
-                   selectorIcon: 'right-3',
+                   selectorIcon: 'order-first mr-2 sm:order-last sm:mr-0',
                    popoverContent: 'text-md min-w-40 dark:bg-[`#323232`] rounded-none p-0',

                    trigger: 'bg-transparent pl-0 text-nowrap rounded-none w-full sm:w-36',
-                   selectorIcon: 'right-3',
+                   selectorIcon: 'order-first mr-2 sm:order-last sm:mr-0',
                    popoverContent: 'text-md min-w-36 dark:bg-[`#323232`] rounded-none p-0',

Also applies to: 271-271

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@frontend/src/app/my/mentorship/programs/`[programKey]/modules/[moduleKey]/issues/page.tsx
at line 240, The selectorIcon is hardcoded to 'right-3' so the caret sits on the
right at all screen sizes; change the two occurrences of selectorIcon (the
properties currently set to 'right-3') to be responsive so the caret is
left-aligned on mobile and right-aligned on larger screens — e.g., use a
responsive utility value like 'left-3 lg:right-3' or switch to a mobile-first
flex ordering approach within the Select component (move the icon element before
the label and apply order classes such as 'order-0 lg:order-2') to ensure the
caret is left on mobile and right on desktop.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In
`@frontend/src/app/my/mentorship/programs/`[programKey]/modules/[moduleKey]/issues/page.tsx:
- Line 240: The selectorIcon is hardcoded to 'right-3' so the caret sits on the
right at all screen sizes; change the two occurrences of selectorIcon (the
properties currently set to 'right-3') to be responsive so the caret is
left-aligned on mobile and right-aligned on larger screens — e.g., use a
responsive utility value like 'left-3 lg:right-3' or switch to a mobile-first
flex ordering approach within the Select component (move the icon element before
the label and apply order classes such as 'order-0 lg:order-2') to ensure the
caret is left on mobile and right on desktop.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 4e5a7796-2b2e-49bb-846d-0f0c66b8cda2

📥 Commits

Reviewing files that changed from the base of the PR and between 9687632 and b542f9c.

📒 Files selected for processing (1)

• frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/issues/page.tsx

[cubic-dev-ai]

No issues found across 1 file

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}

[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