From 95f3b2286e92ede03580e5f67cc7e3bdf99278e9 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sun, 12 Apr 2026 21:49:56 -0700
Subject: [PATCH] fix(FN-1606): constrain task detail dropdown menus to
 viewport on mobile

---
 .../__tests__/core-modals-mobile.test.tsx     | 19 +++++++++++++++++++
 packages/dashboard/app/styles.css             |  5 ++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx b/packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx
index e2d4f710f..84fb4cbd7 100644
--- a/packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx
+++ b/packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx
@@ -101,4 +101,23 @@ describe("core modals mobile css coverage", () => {
     expect(mobileBlock).toContain(".gm-nav-item {");
     expect(mobileBlock).toContain("min-height: 36px;");
   });
+
+  it("TaskDetailModal: action dropdown menus have max-height constraint on mobile", () => {
+    const css = fs.readFileSync(stylesPath, "utf-8");
+    const mobileBlock = getMainMobileBlock(css);
+
+    // Verify dropdown menu selectors are in mobile block
+    expect(mobileBlock).toContain(".detail-actions-menu {");
+    expect(mobileBlock).toContain(".detail-move-menu {");
+
+    // Extract the dropdown menu rule block and verify constraints
+    const menuBlockMatch = mobileBlock.match(
+      /\.detail-actions-menu,\s*\.detail-move-menu\s*\{[^}]+\}/s,
+    );
+    expect(menuBlockMatch).not.toBeNull();
+    const menuBlock = menuBlockMatch![0];
+
+    expect(menuBlock).toContain("max-height");
+    expect(menuBlock).toContain("overflow-y: auto");
+  });
 });
diff --git a/packages/dashboard/app/styles.css b/packages/dashboard/app/styles.css
index b0198b58c..28d23421e 100644
--- a/packages/dashboard/app/styles.css
+++ b/packages/dashboard/app/styles.css
@@ -6560,10 +6560,13 @@ body {
     min-width: 0;
   }
 
-  /* Mobile dropdown menus — position above action bar */
+  /* Mobile dropdown menus — position above action bar, constrained to viewport */
   .detail-actions-menu,
   .detail-move-menu {
     bottom: calc(100% + 4px);
+    max-height: calc(100dvh - 120px);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   .modal-header {