Description
Add proper conditional rendering for optional fields to avoid rendering empty elements.
Problem
In UsersGroups.tsx (lines 486-488):
<p className="text-sm text-doubleword-neutral-600 mb-4 break-words">
{group.description}
</p>
If description is undefined or empty string:
- Renders empty
<p> tag with margin
- Creates awkward whitespace
- Inconsistent spacing between cards
Solution
{group.description && (
<p className="text-sm text-doubleword-neutral-600 mb-4 break-words">
{group.description}
</p>
)}
Other Occurrences to Check
Search for optional fields that might be undefined/empty:
- User display names
- Model descriptions
- Endpoint descriptions
- Any optional text fields
Files to Change
dashboard/src/components/features/users-groups/UsersGroups/UsersGroups.tsx
- Review other components for similar patterns
Impact
- Cleaner DOM (fewer empty elements)
- More consistent spacing
- Better accessibility (no empty elements for screen readers)
Status
⏳ Pending
Description
Add proper conditional rendering for optional fields to avoid rendering empty elements.
Problem
In
UsersGroups.tsx(lines 486-488):If
descriptionisundefinedor empty string:<p>tag with marginSolution
Other Occurrences to Check
Search for optional fields that might be undefined/empty:
Files to Change
dashboard/src/components/features/users-groups/UsersGroups/UsersGroups.tsxImpact
Status
⏳ Pending