Recovery: re-land tablet TaskDetailModal width onto main

.changeset/FN-5599-tablet-modal-width.md

@@ -0,0 +1,5 @@
+---
+"@runfusion/fusion": patch
+---
+
+Widen task detail modal on tablet viewports to use more of the 769px–1024px viewport.

packages/dashboard/app/__tests__/task-detail-modal-tablet-width.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+describe("task detail modal tablet width (FN-5599)", () => {
+  const detailModalCss = readFileSync(
+    resolve(__dirname, "../components/TaskDetailModal.css"),
+    "utf-8",
+  );
+
+  it("keeps desktop base width rule unchanged", () => {
+    const baseRuleMatch = detailModalCss.match(/\.modal\.task-detail-modal\s*\{[^}]*\}/s);
+    expect(baseRuleMatch).toBeTruthy();
+    expect(baseRuleMatch![0]).toContain("width: min(95vw, 800px);");
+  });
+
+  it("defines a tablet breakpoint override for task detail modal width", () => {
+    const tabletBlockMatch = detailModalCss.match(
+      /@media\s*\(min-width:\s*769px\)\s*and\s*\(max-width:\s*1024px\)\s*\{([\s\S]*?)\n\}/,
+    );
+    expect(tabletBlockMatch).toBeTruthy();
+
+    const tabletBlock = tabletBlockMatch![1];
+    const modalRuleMatch = tabletBlock.match(/\.modal\.task-detail-modal\s*\{[^}]*\}/s);
+    expect(modalRuleMatch).toBeTruthy();
+    expect(modalRuleMatch![0]).toContain("width: min(92vw, 960px);");
+    expect(modalRuleMatch![0]).toContain("max-width: 92vw;");
+  });
+
+  it("keeps mobile full-screen sheet width behavior", () => {
+    const mobileBlockMatch = detailModalCss.match(
+      /@media\s*\(max-width:\s*768px\)\s*\{\s*\.detail-move-btn__arrow[\s\S]*?\.modal\.task-detail-modal\s*\{[^}]*\}[\s\S]*?\n\}/,
+    );
+    expect(mobileBlockMatch).toBeTruthy();
+
+    const mobileBlock = mobileBlockMatch![0];
+    const modalRuleMatch = mobileBlock.match(/\.modal\.task-detail-modal\s*\{[^}]*\}/s);
+    expect(modalRuleMatch).toBeTruthy();
+    expect(modalRuleMatch![0]).toContain("width: 100vw;");
+  });
+});

packages/dashboard/app/components/TaskDetailModal.css

@@ -842,6 +842,14 @@
   font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
 }
 
+/* FN-5599: widen task detail modal on tablet viewports. */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .modal.task-detail-modal {
+    width: min(92vw, 960px);
+    max-width: 92vw;
+  }
+}
+
 @media (max-width: 768px) {
   .detail-move-btn__arrow {
     padding: var(--space-xs);