be1950b79c
Removes the mobile stacked-card override for the Summary tab's per-model token/cost table so it stays a real, horizontally-scrollable table matching the Command Center pattern, and updates the covering tests/changeset accordingly. - Drop the @media (max-width: 768px) block in TaskDetailModal.css that converted .task-summary-token-table rows into stacked cards (display:block, thead hidden, td::before labels), so the wrapper's overflow-x: auto and table min-width now govern mobile layout. - Update FNXC:TaskDetailSummaryTokenCost comments to document the new horizontal-scroll contract instead of the removed stacked-card behavior, and refresh the TaskCostTab.css FNXC comment to match. - Add a new regression test (token-table-mobile-scroll.test.ts) asserting the task-detail token table wrapper keeps overflow-x: auto, the mobile media block no longer stacks rows into cards, and the Command Center .cc-table-wrap stays scrollable. - Update the existing TaskDetailModal summary-tab test to assert the stacked-card CSS is absent from the mobile block instead of asserting its presence. - Add a patch changeset describing the fix for end users. Files changed: .changeset/mobile-token-table-scroll.md | 7 +++ .../__tests__/token-table-mobile-scroll.test.ts | 70 +++++++++++++++++++++ packages/dashboard/app/components/TaskCostTab.css | 2 +- .../dashboard/app/components/TaskDetailModal.css | 73 ++-------------------- .../__tests__/TaskDetailModal.summary-tab.test.tsx | 13 ++-- 5 files changed, 90 insertions(+), 75 deletions(-) Fusion-Task-Id: FN-7843 Fusion-Task-Lineage: bb6dde7c-f205-45f3-984a-0fc52be5d547 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
52 lines
1.1 KiB
CSS
52 lines
1.1 KiB
CSS
/*
|
|
FNXC:TaskDetailCost 2026-07-11-12:05:
|
|
The always-available Cost tab reuses the Summary token-table visual system so desktop, right-dock, and mobile task-detail surfaces share one bounded horizontal-scroll table pattern without a second cost-table design.
|
|
*/
|
|
.task-cost-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.task-cost-heading-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.task-cost-total {
|
|
flex-shrink: 0;
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-family: var(--font-mono);
|
|
font-size: calc(var(--space-sm) + var(--space-xs) * 0.5);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.task-cost-table {
|
|
min-width: calc(var(--space-2xl) * 18);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.detail-section--cost {
|
|
padding-inline: var(--space-sm);
|
|
}
|
|
|
|
.task-cost-tab {
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.task-cost-heading-row {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.task-cost-total {
|
|
width: 100%;
|
|
}
|
|
}
|