Skip to content

fix: truncate long plugin descriptions on catalogue cards (closes #1980)#2029

Open
singhanurag0317-bit wants to merge 1 commit into
utksh1:mainfrom
singhanurag0317-bit:fix/issue-1980-plugin-card-description-truncation
Open

fix: truncate long plugin descriptions on catalogue cards (closes #1980)#2029
singhanurag0317-bit wants to merge 1 commit into
utksh1:mainfrom
singhanurag0317-bit:fix/issue-1980-plugin-card-description-truncation

Conversation

@singhanurag0317-bit

Copy link
Copy Markdown

Summary

Closes #1980

Plugin cards on the Catalogue page (/toolkit) did not truncate long descriptions, causing cards to stretch vertically and break the uniform grid layout on smaller screens.

Root Cause

The plugin card description <p> element inside Toolkit.tsx already had line-clamp-3 applied (which limits visible lines), but was missing overflow-hidden, which is required for line-clamp to actually clip the content in all browsers. Additionally, text-ellipsis was explicitly added to ensure the ellipsis (...) is always rendered.

Changes

frontend/src/pages/Toolkit.tsx

Added two Tailwind utility classes to the description <p> tag inside the plugin card:

- <p id={descriptionId} className="text-[10px] text-silver/40 uppercase tracking-widest leading-relaxed line-clamp-3 font-bold italic">
+ <p id={descriptionId} className="text-[10px] text-silver/40 uppercase tracking-widest leading-relaxed line-clamp-3 text-ellipsis overflow-hidden font-bold italic">
  • overflow-hidden: Clips any text overflowing the line-clamp boundary — required for line-clamp to work correctly.
  • text-ellipsis: Ensures the trailing ... ellipsis is rendered when content is clipped.

Verification

  • Vite production build: ✅ Success (npm run build)
  • Vitest unit tests (including ScannerQuickAccess.test.tsx): ✅ Passed
  • No new TypeScript errors: ✅ Confirmed

How to Test

  1. Edit any plugin's metadata.json (e.g. plugins/nmap/metadata.json) and set description to a 500-word string.
  2. Navigate to /toolkit in the frontend.
  3. Confirm that all cards remain the same height and the description is truncated to 3 lines with ....

@utksh1 utksh1 added level:beginner 20 pts difficulty label for small beginner-friendly PRs type:bug Bug fix work category bonus label area:frontend Frontend React/UI work labels Jul 24, 2026

@utksh1 utksh1 left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please rebase and add a focused frontend regression test for a long plugin description/title at a narrow card width. The backend-unit failure must be resolved or shown to be unrelated before merge.

@utksh1 utksh1 left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please rebase this focused UI fix and add a component-level regression test using a long plugin description, so the intended truncation contract is verified rather than relying on a one-line change alone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:frontend Frontend React/UI work level:beginner 20 pts difficulty label for small beginner-friendly PRs type:bug Bug fix work category bonus label

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Text Overflow on Plugin Cards with Long Descriptions

2 participants