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:
gsxdsm
2026-05-05 23:46:19 -07:00
parent 639484f006
commit f61bea99e9
3 changed files with 53 additions and 16 deletions

View File

@@ -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);

View File

@@ -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 ? (