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:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user