e473ba68fb
Reclaims task detail padding so inline diffs have more readable width on compact screens. - Expand the compact Changes file list to consume detail-body padding without page overflow. - Add mobile breakpoint coverage that matches the detail-body padding contract. - Add regression tests for the phone-width inline diff surface and CSS rules. - Add a patch changeset for the published Fusion CLI package. Files changed: .changeset/fn-6997-diff-panel-width.md | 7 ++ .../dashboard/app/components/TaskChangesTab.css | 20 ++++- .../components/__tests__/TaskChangesTab.test.tsx | 98 +++++++++++++++++++++- 3 files changed, 121 insertions(+), 4 deletions(-) Fusion-Task-Id: FN-6997 Fusion-Task-Lineage: a7f21c0d-89a8-430e-a84c-341a10af4a4a
52 lines
1.6 KiB
CSS
52 lines
1.6 KiB
CSS
.task-changes-file-list--compact {
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
/*
|
|
FNXC:TaskChangesDiff 2026-06-25-22:12:
|
|
The inline task Changes diff should reclaim safe horizontal padding from the task detail body, especially on Android-width viewports, without changing the expanded diff modal or allowing page-level horizontal overflow.
|
|
Keep the negative margins matched to the active .detail-body padding at desktop/tablet and mobile breakpoints.
|
|
*/
|
|
.task-changes-tab .changes-file-list.task-changes-file-list--compact {
|
|
margin-left: calc(-1 * calc(var(--space-lg) + var(--space-xs)));
|
|
margin-right: calc(-1 * calc(var(--space-lg) + var(--space-xs)));
|
|
max-width: calc(100% + (calc(var(--space-lg) + var(--space-xs)) * 2));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.task-changes-tab .changes-file-list.task-changes-file-list--compact {
|
|
margin-left: calc(-1 * calc(var(--space-md) + var(--space-xs) / 2));
|
|
margin-right: calc(-1 * calc(var(--space-md) + var(--space-xs) / 2));
|
|
max-width: calc(100% + (calc(var(--space-md) + var(--space-xs) / 2) * 2));
|
|
}
|
|
}
|
|
|
|
.task-changes-file-list--compact .changes-file-header {
|
|
padding: calc(var(--space-sm) - var(--space-xs) / 2);
|
|
gap: calc(var(--space-sm) - var(--space-xs) / 2);
|
|
}
|
|
|
|
.task-changes-file-list--compact .changes-file-stat {
|
|
margin-left: var(--space-xs);
|
|
}
|
|
|
|
.task-changes-file-list--compact .changes-file-path {
|
|
direction: rtl;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.changes-file-header--static {
|
|
cursor: default;
|
|
}
|
|
|
|
.changes-file-header--static:hover,
|
|
.changes-file-header--static:active {
|
|
background: transparent;
|
|
}
|
|
|
|
.changes-file-header--static:focus-visible {
|
|
box-shadow: none;
|
|
}
|
|
|