Fix issues list responsiveness on small screens

[anurag2787]

Proposed change

This PR improves the responsiveness of the Issues list page on small screens.

Resolves #3367

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]

Walkthrough

The PR modifies the IssuesTable component to improve responsive behavior on small screens by adding right padding to the title cell and replacing flexible text truncation with CSS line-clamping (limited to 2 lines) and fixed height constraints.

Changes

Cohort / File(s)	Summary
Title Cell Styling and Text Clamping frontend/src/components/IssuesTable.tsx	Added right padding (pr-12) to title cell td wrapper; replaced truncation and responsive display classes with line-clamp-2 and explicit height (h-12) to clamp issue titles to two lines with proper overflow handling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• Unify issues view between module issues page and Mentee page #3050 — Modifies the same IssuesTable component to add and unify the component with accompanying tests.

Suggested labels

frontend

Suggested reviewers

• arkid15r
• kasya

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR partially addresses the linked issue #3367 by implementing text truncation via line-clamp-2, but the changes appear incomplete regarding label overflow handling and full responsive validation.	Verify that both issue titles and labels are properly truncated/wrapped on small screens, and confirm the fix works across all targeted screen sizes as shown in issue #3367.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing responsiveness of the issues list on small screens, which directly matches the code modifications in IssuesTable.tsx.
Out of Scope Changes check	✅ Passed	All changes in IssuesTable.tsx are focused on responsiveness improvements for the issues list, directly addressing the linked issue #3367 objectives without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description clearly describes the change (improving responsiveness on small screens), links to the related issue (#3367), includes supporting documentation (screenshot), and aligns with the file changes in IssuesTable.tsx.

_{✏️ 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.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/components/IssuesTable.tsx (1)

146-152: Label overflow not addressed per PR objectives.

Issue #3367 specifies that labels should be truncated to prevent overflow on small screens, but individual label <span> elements have no max-width or truncation constraints. A long label name will still extend to the container edge.

Consider adding truncation to the label spans on mobile:

Suggested approach

                      <span
                        key={label}
-                       className="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-700 lg:rounded-lg lg:border lg:border-gray-400 lg:bg-transparent lg:hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:lg:border-gray-300 dark:lg:hover:bg-gray-700"
+                       className="inline-flex max-w-[120px] items-center truncate rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-700 lg:max-w-none lg:truncate-none lg:rounded-lg lg:border lg:border-gray-400 lg:bg-transparent lg:hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:lg:border-gray-300 dark:lg:hover:bg-gray-700"
                      >
                        {label}
                      </span>

Adjust max-w-[120px] as appropriate for your design. You may also want a Tooltip for truncated labels.

🧹 Nitpick comments (1)

frontend/src/components/IssuesTable.tsx (1)

124-130: Consider removing fixed height and redundant overflow-hidden.

A few observations on the truncation approach:

1. h-12 fixed height is fragile — it assumes exactly 2 lines fit in 48px. Single-line titles will have extra whitespace, and any font/line-height changes could break the layout.

2. overflow-hidden is redundant — Tailwind's line-clamp-2 already includes overflow: hidden.

Let line-clamp-2 handle the height dynamically for more robust behavior.

Suggested change

                     <button
                       type="button"
                       onClick={() => handleIssueClick(issue.number)}
-                      className="line-clamp-2 h-12 cursor-pointer overflow-hidden text-left text-sm font-medium text-blue-600 hover:underline lg:max-w-md dark:text-blue-400"
+                      className="line-clamp-2 cursor-pointer text-left text-sm font-medium text-blue-600 hover:underline lg:max-w-md dark:text-blue-400"
                     >

[anurag2787]

Hi i runed make check-test locally and all tests are passing on my side.
From the pipeline logs the failure looks like ENOSPC: no space left on device which seems to be a CI runner storage/memory issue

[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

[kasya]

@anurag2787 this looks good! Thanks!