fix(dashboard): widen mission card title and surface Plan New Mission CTA
- Stack mission cards vertically inside the sidebar so the title gets the full card width; action buttons drop to their own row below. - Move the Activity timestamp out of the cramped stats row onto its own line. - Replace the icon-only Sparkles button in the sidebar header with a full-width centered "Plan New Mission" button (icon + text). Mobile footer button uses the same label. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
15
.changeset/mission-sidebar-card-followups.md
Normal file
15
.changeset/mission-sidebar-card-followups.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
Mission sidebar follow-ups for card density and CTA prominence.
|
||||
|
||||
- **Wider title in the sidebar**: stack mission cards vertically inside the
|
||||
sidebar so the title row spans the full card width instead of competing
|
||||
with the action buttons. Action buttons now sit on their own row below.
|
||||
- **Activity on its own row**: the `Activity X ago` label moved out of the
|
||||
cramped stats line into its own row above the progress bar.
|
||||
- **Centered "Plan New Mission" CTA**: the sidebar header now hosts a
|
||||
full-width centered button with the Sparkles icon and "Plan New Mission"
|
||||
text (instead of an icon-only button tucked in the corner). The mobile
|
||||
footer button uses the same label for consistency.
|
||||
@@ -208,12 +208,17 @@
|
||||
.mission-manager__sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-md);
|
||||
border-bottom: var(--btn-border-width) solid var(--border);
|
||||
}
|
||||
|
||||
.mission-manager__sidebar-cta {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Hide duplicate sidebar title; the shared header already labels this view. */
|
||||
.mission-manager__sidebar-title {
|
||||
display: none;
|
||||
@@ -684,6 +689,17 @@
|
||||
background: var(--card);
|
||||
}
|
||||
|
||||
/* In the narrow sidebar, stack so the title gets full width and action buttons sit on their own row. */
|
||||
.mission-manager__sidebar .mission-list__item {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.mission-manager__sidebar .mission-list__item-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mission-list__item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -752,6 +768,10 @@
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.mission-list__item-activity {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.mission-list__item-stat {
|
||||
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
|
||||
color: var(--text-muted);
|
||||
|
||||
@@ -3520,9 +3520,6 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
|
||||
{tasksFailed} failed
|
||||
</button>
|
||||
)}
|
||||
<span className="mission-relative-time" data-testid={`mission-last-activity-${m.id}`}>
|
||||
Activity {getRelativeTime(health?.lastActivityAt)}
|
||||
</span>
|
||||
<div className={`mission-list__item-progress mission-list__item-progress--${healthState}`}>
|
||||
<div
|
||||
className="mission-list__item-progress-bar"
|
||||
@@ -3531,6 +3528,13 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{showSummaryBlock && (
|
||||
<div className="mission-list__item-activity">
|
||||
<span className="mission-relative-time" data-testid={`mission-last-activity-${m.id}`}>
|
||||
Activity {getRelativeTime(health?.lastActivityAt)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mission-list__item-actions" onClick={(e) => e.stopPropagation()}>
|
||||
{m.status === "active" && (
|
||||
@@ -3701,7 +3705,7 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
|
||||
<div className="mission-list__footer-actions">
|
||||
<button className="mission-add-btn" onClick={() => setShowInterviewModal(true)}>
|
||||
<Sparkles size={16} />
|
||||
Create New Mission
|
||||
Plan New Mission
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -3853,17 +3857,15 @@ export function MissionManager({ isOpen, isInline = false, onClose, addToast, pr
|
||||
style={isMobile ? undefined : { width: `${sidebarWidth}px` }}
|
||||
>
|
||||
<div className="mission-manager__sidebar-header">
|
||||
<span className="mission-manager__sidebar-title">Missions</span>
|
||||
<div className="mission-manager__sidebar-actions">
|
||||
<button
|
||||
className="mission-add-btn mission-add-btn--sm"
|
||||
onClick={() => setShowInterviewModal(true)}
|
||||
title="Create New Mission"
|
||||
aria-label="Create New Mission"
|
||||
>
|
||||
<Sparkles size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="mission-add-btn mission-manager__sidebar-cta"
|
||||
onClick={() => setShowInterviewModal(true)}
|
||||
title="Plan New Mission"
|
||||
aria-label="Plan New Mission"
|
||||
>
|
||||
<Sparkles size={14} />
|
||||
Plan New Mission
|
||||
</button>
|
||||
</div>
|
||||
<div className="mission-manager__sidebar-list">
|
||||
{loading ? (
|
||||
|
||||
Reference in New Issue
Block a user