No-Jira - PDS Goal refactors: Fix long title name stretching goal cards

[zweatshirt]

Description

• Fixes styling for Goal Cards so long titles no longer stretch cards
• Long titles are given ellipses and a tooltip to show the rest of the title

Testing

• Go to hrTools/pdsGoalCalculator
• Make a goal with a long title
• Check that the styling of the card is maintained and looks good.

Checklist:

• I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
• I have applied the appropriate labels (Add the label "Preview" to automatically create a preview environment)
• I have run the Claude Code /pr-review command locally and fixed any relevant suggestions
• I have requested a review from another person on the project
• I have tested my changes in preview or in staging
• I have cleaned up my commit history

[github-actions]

Preview branch generated at https://pds-refactors.d3dytjb8adxkk5.amplifyapp.com

[github-actions]

Bundle sizes [mpdx-react]

Compared against 44ff7b2

No significant changes found

[zweatshirt]

Multi-Agent Code Review — PR #1759

Verdict: CLEAN — No blockers, no important issues. All findings are pure suggestions (severity < 5.0).

Risk: 1/10 (LOW) — 13 source lines + 38 test lines, single component, no shared infrastructure.

Agents: Architecture, Testing, Standards, UX (4 specialized reviewers)

What this PR does well

• Resolves the long-title card-stretching issue with a clear truncation strategy (fixed width + noWrap + tooltip fallback)
• Tooltip and visible text now share the same ?? t('Unnamed Goal') fallback, so the tooltip-on-hover invariant is durable across future refactors
• Two new tests cover both the named and unnamed-goal hover paths; both pass
• All Standards Checklist items pass: named exports, alphabetical imports, typed GqlMockedProvider, findBy* for async, no any, no new Date()

Suggestions (informational, do not block)

PdsGoalCard.tsx:28 — width: 350 (was minWidth: 350) hard-caps card width on viewports narrower than 350px. Adding maxWidth: '100%' lets the card shrink below 350px on small mobile screens while still capping it above. (UX 4.5)

PdsGoalCard.tsx:132 — goal.name?.trim() || t('Unnamed Goal') is more defensive than ?? because it also catches empty strings and whitespace-only names. Likely covered by server-side validation, but cheap to harden. (UX/Testing 4.0)

PdsGoalCard.test.tsx — Edge cases not exercised: name: '' and name: ' '. Optional addition since the server probably rejects these. (Testing 4.0)

Sibling drift — src/components/HrTools/GoalCalculator/GoalCard/GoalCard.tsx is now visually divergent (no truncation, minWidth: 350). The shared-component extraction was deferred per prior discussion; flagging for awareness only. (Architecture 3.0)

Pre-existing (codebase-wide) — Tooltip on a non-focusable Typography is keyboard-inaccessible. The same pattern exists in MPGAIncomeExpensesReport, SavingsFundTransfer, and others. Worth a separate codebase-wide a11y ticket; not a regression. (UX, pre-existing)

Review Summary

Agent	Critical	High	Important	Medium	Suggestions	Confidence
Architecture	0	0	0	0	4	High
Testing	0	0	0	0	2	High
Standards	0	0	0	0	0	High
UX	0	0	0	0	4	High
Total	0	0	0	0	10	High

[zweatshirt]

[Suggestion] `width: 350` hard-caps the card on narrow viewports — at <350px the card overflows the container. Adding `maxWidth: '100%'` lets the card shrink below 350px on small mobile screens while still capping it above:

const StyledCard = styled(Card)(({ theme }) => ({
  width: 350,
  maxWidth: '100%',
  borderRadius: theme.shape.borderRadius,
}));

[zweatshirt]

[Suggestion] `goal.name ??` only catches `null`/`undefined`, not `''` or whitespace-only strings. If your server-side `.required()` validation already blocks those, this is a non-issue — otherwise `goal.name?.trim() || t('Unnamed Goal')` would harden both the visible text and the tooltip:

<Tooltip title={goal.name?.trim() || t('Unnamed Goal')}>
  <Typography ...>
    {goal.name?.trim() || t('Unnamed Goal')}
  </Typography>
</Tooltip>

[github-actions]

AI Review Auto-Approval

Risk Level: LOW (1/10)
Verdict: CLEAN (no issues found)

This PR was auto-approved because:

• The multi-agent AI review determined it is low risk
• No blocking issues were found

If you believe this PR needs human review, dismiss this approval and request a review manually.