FN-5791: add markdown goal descriptions with show-more toggle

Improve goal card descriptions to support markdown formatting while keeping long content scannable.

- render goal descriptions with markdown + GFM support in GoalsView
- collapse long or multi-line descriptions by default and add Show more/Show less disclosure
- style collapsed description layout and add responsive clamp adjustments
- add tests for markdown rendering, long-description toggle behavior, and short-description no-toggle behavior

Files changed:
 packages/dashboard/app/components/GoalsView.css    | 27 +++++++++++++
 packages/dashboard/app/components/GoalsView.tsx    | 46 +++++++++++++++++++++-
 packages/dashboard/app/components/__tests__/GoalsView.test.tsx    | 42 ++++++++++++++++++++
 3 files changed, 114 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-5791

Fusion-Task-Lineage: a3a0be5c-4a8d-4dc1-93a3-40891ab7762b
This commit is contained in:
gsxdsm
2026-05-31 16:43:58 -07:00
parent 7b70e7fb72
commit d585ac2181
3 changed files with 114 additions and 1 deletions

View File

@@ -112,6 +112,28 @@
color: var(--text-muted);
}
.goals-card-description > :first-child {
margin-top: 0;
}
.goals-card-description > :last-child {
margin-bottom: 0;
}
.goals-card-description-collapsed {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
max-height: calc(var(--space-md) * 6);
}
.goals-card-description-toggle {
margin-top: var(--space-xs);
align-self: flex-start;
color: var(--text-muted);
}
.goals-card-status {
margin: var(--space-xs) 0 0;
color: var(--text-muted);
@@ -145,4 +167,9 @@
.goals-card-actions {
flex-direction: column;
}
.goals-card-description-collapsed {
-webkit-line-clamp: 3;
max-height: calc(var(--space-md) * 5);
}
}