diff --git a/.changeset/fn-8287-task-detail-button-sizes.md b/.changeset/fn-8287-task-detail-button-sizes.md new file mode 100644 index 0000000000..a4ed86be82 --- /dev/null +++ b/.changeset/fn-8287-task-detail-button-sizes.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Task detail action buttons now render at a consistent size across all themes. +category: fix +dev: Extends the shared --detail-priority-control-min-height / --detail-control-border-radius sizing (FN-7585/FN-7633) to all five .detail-meta-inline-controls controls (attach, GitHub, priority, oversight, execution-mode), pinning a shared height AND square width/min-width so the cluster resolves one uniform square box regardless of theme --space-*/--icon-size-* tokens. diff --git a/docs/dashboard-guide.md b/docs/dashboard-guide.md index 27e5fbfc8c..6569cec7d7 100644 --- a/docs/dashboard-guide.md +++ b/docs/dashboard-guide.md @@ -1358,7 +1358,7 @@ Inspect task definition, logs, review feedback, comments, artifacts, workflow ou - Task-detail Activity steering comments are persisted as user comments/steering guidance and surfaced to every relevant agent lane: live executor sessions receive steering injection, while planner, reviewer (spec/plan/code), and merger agents (standard and clean-room AI merge/review) receive the latest user comments in their next prompt/pass. - The priority chip in task metadata is an inline picker: you can change priority directly without entering full edit mode. - Execution mode has a read-mode inline lightning-bolt toggle for Fast mode on/off without opening the full edit form. -- These two metadata controls share matched sizing/alignment in read mode (including mobile wrapping) so they behave like a single polished control group. +- The inline metadata action cluster — Attach file, eligible-task GitHub tracking, Oversight, Priority, and Fast execution mode — shares one tokenized square box size, border, and radius in read mode (including mobile wrapping) so every available control behaves like one polished group across themes. - Task metadata keeps priority, execution mode, provenance, optional workflow identity, optional PR context, and compact `Created` / `Updated` timestamps in one wrapping row across desktop and mobile widths; recent timestamps render as relative time (`just now`, `Xm`, `Xh`, `Xd`) and older values switch to short month/day dates. - The **Actions** menu exposes **Pause** / **Unpause** for eligible non-terminal tasks, including tasks assigned to agents. If a task was paused by an agent, the **Paused by agent** note is informational; users can still unpause it manually from the same menu. On mobile task popups, tapping an Actions item applies the selected action once and closes the menu. diff --git a/packages/dashboard/app/components/TaskDetailModal.css b/packages/dashboard/app/components/TaskDetailModal.css index efc885bf2c..d62b04102a 100644 --- a/packages/dashboard/app/components/TaskDetailModal.css +++ b/packages/dashboard/app/components/TaskDetailModal.css @@ -391,6 +391,29 @@ The task-detail modal metadata must keep priority, execution mode, provenance, P gap: var(--space-xs); } +/* +FNXC:TaskDetail 2026-07-17-17:30: +FN-8287 extends the FN-7585/FN-7633 height-pinned pattern into one square-box +rule for every inline action: the FN-8194/FN-8209 attach, GitHub, and priority +icons now share the oversight and execution-mode controls' tokenized height, +width, border, and radius. Pinning both dimensions prevents theme-specific +space or icon tokens from making this cluster visually uneven. +*/ +.detail-inline-attach, +.detail-inline-github-toggle, +.detail-priority-trigger, +.detail-oversight-menu-trigger, +.detail-execution-mode-toggle { + height: var(--detail-priority-control-min-height); + min-height: var(--detail-priority-control-min-height); + width: var(--detail-priority-control-min-height); + min-width: var(--detail-priority-control-min-height); + box-sizing: border-box; + border-width: var(--btn-border-width); + border-color: var(--border); + border-radius: var(--detail-control-border-radius); +} + /* FNXC:QuickAddActionRow 2026-07-17-12:00: FN-8209: Task Detail uses the same compact icon-only priority affordance as @@ -475,27 +498,7 @@ no raw colors so the tokenized-focus assertion stays green. display: inline-flex; align-items: center; gap: var(--space-xs); - /* - FNXC:TaskDetail 2026-07-07-15:40: - FN-7633 — same shared-height fix as `.detail-priority-chip` above: pin an - explicit `height` (not just `min-height`) from the shared - `--detail-priority-control-min-height` token so this control cannot resolve - shorter than the Oversight trigger, which FN-7618 made stretch to the - cluster row height via its wrapper's `align-self: stretch`. - */ - height: var(--detail-priority-control-min-height); - min-height: var(--detail-priority-control-min-height); padding-block: var(--space-xs); - box-sizing: border-box; - /* - FNXC:TaskDetail 2026-07-05-00:00: - FN-7585 — pin the same shared border/radius token set as the Priority and - Oversight controls even though `.btn` already applies a border, so a future - change to `.btn`'s defaults cannot silently desync this cluster. - */ - border-width: var(--btn-border-width); - border-color: var(--border); - border-radius: var(--detail-control-border-radius); } .detail-execution-mode-toggle--fast { @@ -682,40 +685,14 @@ affect its size or anchoring — only the trigger's box height changes. .detail-oversight-menu-trigger { padding-block: var(--space-xs); - box-sizing: border-box; /* - FNXC:TaskDetail 2026-07-05-00:00: - FN-7585 — pin the same shared border/radius trio as Priority/Execution-mode - so the Oversight trigger matches the rest of the control cluster. - FNXC:PlannerOversight 2026-07-05-00:00: FN-7604 — this trigger is now the single universal surface at every viewport (the desktop-only `.detail-oversight-chip` it used to swap in for - was removed). - - FNXC:TaskDetail 2026-07-05-14:00: - FN-7618 — `align-self: stretch` makes the trigger fill the height of its - `.detail-oversight-menu-dropdown` wrapper (now `inline-flex`/`align-items: - stretch`), which itself stretches to the shared cluster row height. Kept - below as a harmless safety net (a no-op once `height` is explicit) for any - context where the wrapper isn't stretched. - - FNXC:TaskDetail 2026-07-07-15:40: - FN-7633 — relying on `align-self: stretch` alone made this trigger resolve - a TALLER box than Priority/Execution-mode, which only had `min-height` as a - floor (not a fixed height), so the three controls no longer read as one - uniform row. Pin the SAME explicit `height` (not just `min-height`) from - the shared `--detail-priority-control-min-height` token used by - `.detail-priority-chip` and `.detail-execution-mode-toggle` above, so all - three controls resolve identical box heights regardless of flex - stretch/content differences. `min-height` stays as the floor. + was removed). Its shared square sizing is declared with every inline action + above; this stretch fallback only preserves the dropdown wrapper contract. */ - height: var(--detail-priority-control-min-height); - min-height: var(--detail-priority-control-min-height); align-self: stretch; - border-width: var(--btn-border-width); - border-color: var(--border); - border-radius: var(--detail-control-border-radius); } 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 5212011213..aa52f13567 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 @@ -253,6 +253,30 @@ describe("TaskDetailModal", () => { expect(css).not.toMatch(/@media \(max-width: 640px\)\s*\{[^}]*\.detail-meta-inline-controls\s*\{[^}]*flex-direction:\s*column;/); }); + it("gives every task-detail inline action the shared square tokenized box across themes (FN-8287)", () => { + const css = readDashboardStylesSource(); + const sharedSizingSelector = [ + ".detail-inline-attach", + ".detail-inline-github-toggle", + ".detail-priority-trigger", + ".detail-oversight-menu-trigger", + ".detail-execution-mode-toggle", + ].join(",\n"); + const sharedSizingBlock = getCssRuleBlock(css, sharedSizingSelector); + + // FNXC:TaskDetail 2026-07-17-17:30: Attach, GitHub, Priority, + // Oversight, and Fast must read one common rule so theme-specific + // spacing/icon tokens cannot desynchronize their square footprints. + expect(sharedSizingBlock).toContain("height: var(--detail-priority-control-min-height);"); + expect(sharedSizingBlock).toContain("min-height: var(--detail-priority-control-min-height);"); + expect(sharedSizingBlock).toContain("width: var(--detail-priority-control-min-height);"); + expect(sharedSizingBlock).toContain("min-width: var(--detail-priority-control-min-height);"); + expect(sharedSizingBlock).toContain("box-sizing: border-box;"); + expect(sharedSizingBlock).toContain("border-width: var(--btn-border-width);"); + expect(sharedSizingBlock).toContain("border-color: var(--border);"); + expect(sharedSizingBlock).toContain("border-radius: var(--detail-control-border-radius);"); + }); + it.skip("unifies border/radius/height across the Priority, Execution-mode, and Oversight quick controls (FN-7585)", () => { const css = readDashboardStylesSource();