From bd8a6ae7bbaa1851c194d4ba45039c60d36ffd3f Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 16 Jul 2026 16:44:39 -0700 Subject: [PATCH] FN-8154: fix mobile task-detail Feed padding 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) --- .../fn-8154-task-detail-mobile-padding.md | 7 ++++++ .../app/components/TaskDetailModal.css | 16 +++++++++++++- ...kDetailModal.attachments-and-tabs.test.tsx | 2 +- .../__tests__/TaskDetailModal.css.test.ts | 22 +++++++++++++++++++ ...Modal.responsive-and-dependencies.test.tsx | 2 +- 5 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 .changeset/fn-8154-task-detail-mobile-padding.md diff --git a/.changeset/fn-8154-task-detail-mobile-padding.md b/.changeset/fn-8154-task-detail-mobile-padding.md new file mode 100644 index 0000000000..fa5de43403 --- /dev/null +++ b/.changeset/fn-8154-task-detail-mobile-padding.md @@ -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. diff --git a/packages/dashboard/app/components/TaskDetailModal.css b/packages/dashboard/app/components/TaskDetailModal.css index 8027eabb4b..abe5833b19 100644 --- a/packages/dashboard/app/components/TaskDetailModal.css +++ b/packages/dashboard/app/components/TaskDetailModal.css @@ -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. */ diff --git a/packages/dashboard/app/components/__tests__/TaskDetailModal.attachments-and-tabs.test.tsx b/packages/dashboard/app/components/__tests__/TaskDetailModal.attachments-and-tabs.test.tsx index 9858dd4308..1ad0a98c9d 100644 --- a/packages/dashboard/app/components/__tests__/TaskDetailModal.attachments-and-tabs.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskDetailModal.attachments-and-tabs.test.tsx @@ -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"); diff --git a/packages/dashboard/app/components/__tests__/TaskDetailModal.css.test.ts b/packages/dashboard/app/components/__tests__/TaskDetailModal.css.test.ts index 00c9c5c8ff..16794af01d 100644 --- a/packages/dashboard/app/components/__tests__/TaskDetailModal.css.test.ts +++ b/packages/dashboard/app/components/__tests__/TaskDetailModal.css.test.ts @@ -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(); diff --git a/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx b/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx index e1aeac6332..b965b6afb4 100644 --- a/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx @@ -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);"); });