From a8a90736d8dd1ed4e1bb343700ee21cb23c200c2 Mon Sep 17 00:00:00 2001
From: Justin Gasper <jmgasper@gmail.com>
Date: Tue, 4 Aug 2026 06:51:49 +1000
Subject: [PATCH] PM-5757: Keep footer cancel menu visible

What was broken

The edit-footer cancellation status menu extended beyond the left edge of the viewport, so QA could not see the complete menu.

Root cause

The previous follow-up reused the header-oriented cancellation action in the form's left footer slot. Its 280px menu remained right-aligned to the narrow trigger and expanded offscreen to the left.

What was changed

Added an optional start alignment for the cancellation menu and enabled it only for the edit-footer action. Header and read-only footer actions retain their existing end alignment, and the challenge editor documentation now describes the footer behavior.

Any added/updated tests

Extended ChallengeEditorPage coverage to verify that the edit-footer cancellation menu receives the start-alignment modifier while preserving the existing status selection, confirmation, PATCH, and refresh assertions.
---
 .../ChallengeEditorPage/ChallengeEditorPage.module.scss  | 5 +++++
 .../ChallengeEditorPage/ChallengeEditorPage.spec.tsx     | 2 ++
 .../ChallengeEditorPage/ChallengeEditorPage.tsx          | 9 ++++++++-
 .../src/pages/challenges/ChallengeEditorPage/README.md   | 2 +-
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.module.scss b/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.module.scss
index 378591105..374b64690 100644
--- a/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.module.scss
+++ b/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.module.scss
@@ -106,6 +106,11 @@
     z-index: 20;
 }
 
+.cancelMenuStart {
+    left: 0;
+    right: auto;
+}
+
 .cancelMenuItem {
     background: transparent;
     border: 0;
diff --git a/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.spec.tsx b/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.spec.tsx
index 17a4c7cc8..7b75c4292 100644
--- a/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.spec.tsx
+++ b/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.spec.tsx
@@ -483,6 +483,8 @@ describe('ChallengeEditorPage', () => {
         })
         expect(cancelStatusOption)
             .toBeTruthy()
+        expect(cancelStatusOption.parentElement?.className)
+            .toContain('cancelMenuStart')
         expect(screen.getByText('Challenge Editor Form'))
             .toBeTruthy()
 
diff --git a/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.tsx b/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.tsx
index 89314351a..40f992eb9 100644
--- a/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.tsx
+++ b/src/apps/work/src/pages/challenges/ChallengeEditorPage/ChallengeEditorPage.tsx
@@ -12,6 +12,7 @@ import {
     useNavigate,
     useParams,
 } from 'react-router-dom'
+import classNames from 'classnames'
 
 import { PageWrapper } from '~/apps/review/src/lib'
 import {
@@ -472,6 +473,7 @@ function getChallengesListPath(projectId?: string): string {
 interface CancelChallengeActionProps {
     challengeId: string
     challengeName: string
+    menuAlign?: 'end' | 'start'
     onCancelled: () => void
 }
 
@@ -584,7 +586,11 @@ const CancelChallengeAction: FC<CancelChallengeActionProps> = (
                 />
                 {showCancelMenu
                     ? (
-                        <div className={styles.cancelMenu}>
+                        <div
+                            className={classNames(styles.cancelMenu, {
+                                [styles.cancelMenuStart]: props.menuAlign === 'start',
+                            })}
+                        >
                             {CANCEL_CHALLENGE_STATUSES.map(status => (
                                 <button
                                     key={status}
@@ -1517,6 +1523,7 @@ export const ChallengeEditorPage: FC = () => {
             <CancelChallengeAction
                 challengeId={challengeActionParams.challengeId}
                 challengeName={challengeActionParams.challengeName}
+                menuAlign='start'
                 onCancelled={challengeActionParams.onChallengeUpdated}
             />
         )
diff --git a/src/apps/work/src/pages/challenges/ChallengeEditorPage/README.md b/src/apps/work/src/pages/challenges/ChallengeEditorPage/README.md
index 0bef720b9..86835f416 100644
--- a/src/apps/work/src/pages/challenges/ChallengeEditorPage/README.md
+++ b/src/apps/work/src/pages/challenges/ChallengeEditorPage/README.md
@@ -142,7 +142,7 @@ The form uses `challengeBasicInfoSchema` from `src/apps/work/src/lib/schemas/cha
 - After the initial create request succeeds on the `/projects/:projectId/challenges/new` route, the
   page header immediately treats that record as an existing `NEW` challenge so the status pill and
   `Delete` action are available before the route transitions to the regular edit page.
-- `Cancel` is shown on the details tab for existing `DRAFT` challenges on both view and edit routes, and for `ACTIVE` challenges while editing. Eligible edit routes use the same cancellation-status menu and confirmation flow in the header and footer; new or non-cancellable forms retain the footer action that returns to the challenge list.
+- `Cancel` is shown on the details tab for existing `DRAFT` challenges on both view and edit routes, and for `ACTIVE` challenges while editing. Eligible edit routes use the same cancellation-status menu and confirmation flow in the header and footer; the footer menu opens toward the form so every status remains inside the viewport. New or non-cancellable forms retain the footer action that returns to the challenge list.
 - `Mark Complete` is shown on the details tab for existing `ACTIVE` task challenges in both view and edit routes when exactly one assignee can be resolved from the challenge submitter resources. It mirrors the legacy work-manager flow by confirming the task prize and assignee, patching the challenge to `COMPLETED`, and saving that assignee as the sole winner. The button remains hidden for copilots assigned to their own task, and it reuses the same shared large secondary styling as `Cancel`.
 - `Delete` is shown for ordinary challenges in `NEW` status. Persisted challenges with exact
   `is_test_challenge=true` metadata can also be deleted from edit or read-only view routes after