root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FN-8154: fix mobile task-detail Feed padding

Browse Source 
Narrow the mobile Feed inset while preserving clearance for its overlay control.

- Restore full-width activity content on narrow task-detail surfaces.
- Reserve overlay-toggle clearance only for first-row Feed elements.
- Cover the responsive CSS contract and publish a patch changeset.

Files changed:
 .changeset/fn-8154-task-detail-mobile-padding.md   |  7 +++++++
 .../dashboard/app/components/TaskDetailModal.css   | 16 +++++++++++++++-
 .../TaskDetailModal.attachments-and-tabs.test.tsx  |  2 +-
 .../__tests__/TaskDetailModal.css.test.ts          | 22 ++++++++++++++++++++++
 ...etailModal.responsive-and-dependencies.test.tsx |  2 +-
 5 files changed, 46 insertions(+), 3 deletions(-)

Fusion-Task-Id: FN-8154
Fusion-Task-Lineage: 9094d12d-0431-4f42-bec9-c573686c7d6f
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-16 16:44:39 -07:00
parent ee28f5e45e
commit bd8a6ae7bb
5 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/fn-8154-task-detail-mobile-padding.md Normal file
View File

@@ -0,0 +1,7 @@
---
"@runfusion/fusion": patch
---
summary: Fix excessive right padding in the task detail Feed on mobile.
category: fix
dev: Reduces the mobile .detail-activity inset and localizes overlay-toggle clearance to its first rows.

16
packages/dashboard/app/components/TaskDetailModal.css
View File

@@ -3327,8 +3327,22 @@ Live and Feed Activity expansion overlays the content instead of reserving a too
max-inline-size: calc(100vw - (var(--space-md) * 2));
}
/*
FNXC:TaskDetailActivity 2026-07-16-00:00:
Mobile Feed uses a normal `var(--space-md)` right inset so the full scrolling list
uses available width. Reserve the overlay-toggle clearance only on top-of-panel
first-row elements, keeping the first visible row uncovered without a deep gutter.
*/
.detail-activity {
padding-inline-end: calc(var(--space-2xl) + var(--space-lg));
padding-inline-end: var(--space-md);
}
.detail-activity:not(.detail-activity--interventions) > h4,
.detail-activity:not(.detail-activity--interventions) > .detail-log-truncated,
.detail-activity:not(.detail-activity--interventions) > .detail-log-loading,
.detail-activity:not(.detail-activity--interventions) > .detail-log-empty,
.detail-activity:not(.detail-activity--interventions) > .detail-activity-list > .detail-log-entry:first-child {
padding-inline-end: calc(var(--space-2xl) + var(--space-sm));
}
/* FNXC:PlannerOversight 2026-07-05-00:00: mobile reserves more padding for the overlay toggle; neutralize it for Interventions too so FN-7519's timeline stays full width on mobile per FN-7581. */

2
packages/dashboard/app/components/__tests__/TaskDetailModal.attachments-and-tabs.test.tsx
View File

@@ -933,7 +933,7 @@ describe("TaskDetailModal", () => {
expect(activityOverlayRule).toContain("top: var(--space-md)");
expect(activityOverlayRule).toContain("right: var(--space-md)");
expect(activityOverlayRule).toContain("z-index: 3");
expect(mobileCss).toContain(" .detail-activity {\n padding-inline-end: calc(var(--space-2xl) + var(--space-lg));\n }");
expect(mobileCss).toContain(" .detail-activity {\n padding-inline-end: var(--space-md);\n }");
expect(mobileCss).toContain(" .activity-expand-toggle--overlay {\n top: var(--space-sm);\n right: var(--space-sm);\n }");
expect(expandedTitleRule).not.toContain("display: none");
expect(expandedMetaRule).toContain("display: none");

22
packages/dashboard/app/components/__tests__/TaskDetailModal.css.test.ts
View File

@@ -44,6 +44,28 @@ describe("TaskDetailModal CSS contract", () => {
expect(planBlock).toContain("max-width: 100%;");
});
it("FN-8154 keeps the mobile Feed inset narrow while clearing its overlay toggle from first rows", async () => {
const css = await loadAllAppCss();
const baseCss = await loadAllAppCssBaseOnly();
const mobileCss = css.slice(css.indexOf("@media (max-width: 768px)"));
const firstRowSelectors = [
".detail-activity:not(.detail-activity--interventions) > h4",
".detail-activity:not(.detail-activity--interventions) > .detail-log-truncated",
".detail-activity:not(.detail-activity--interventions) > .detail-log-loading",
".detail-activity:not(.detail-activity--interventions) > .detail-log-empty",
".detail-activity:not(.detail-activity--interventions) > .detail-activity-list > .detail-log-entry:first-child",
];
expect(baseCss).toContain(".detail-activity {\n position: relative;\n padding-inline-end: calc(var(--space-2xl) + var(--space-md));\n}");
expect(mobileCss).toContain(" .detail-activity {\n padding-inline-end: var(--space-md);\n }");
expect(mobileCss).not.toContain(" .detail-activity {\n padding-inline-end: calc(var(--space-2xl) + var(--space-lg));\n }");
expect(mobileCss).toContain(" .detail-activity--interventions {\n padding-inline-end: 0;\n }");
for (const selector of firstRowSelectors) {
const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
expect(mobileCss, selector).toMatch(new RegExp(`${escapedSelector}(?:\\s*,\\s*[^{}]+)*\\s*\\{[^}]*padding-inline-end: calc\\(var\\(--space-2xl\\) \\+ var\\(--space-sm\\)\\);`));
}
});
it("FN-7351/FN-7375 keeps the Activity tab dropdown portal-safe on narrow task-detail surfaces", async () => {
const css = await loadAllAppCssBaseOnly();
const fullCss = await loadAllAppCss();

2
packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx
View File

@@ -666,7 +666,7 @@ describe("TaskDetailModal", () => {
expect(overlayBlock).toContain("position: absolute;");
expect(overlayBlock).toContain("top: var(--space-md);");
expect(overlayBlock).toContain("right: var(--space-md);");
expect(mobileBlock).toContain(" .detail-activity {\n padding-inline-end: calc(var(--space-2xl) + var(--space-lg));\n }");
expect(mobileBlock).toContain(" .detail-activity {\n padding-inline-end: var(--space-md);\n }");
expect(mobileOverlayBlock).toContain("top: var(--space-sm);");
expect(mobileOverlayBlock).toContain("right: var(--space-sm);");
});