FN-7841: fix mobile Todo single-panel stack to fill full height

Fixes the narrow-container (phone-width) Todo view so the visible list or
detail panel stretches to fill available height instead of inheriting the
tablet two-panel sidebar's max-height cap.

- Scope the single-panel stack rule to .todo-view-layout .todo-view-sidebar /
  .todo-view-main so it wins over the later @media (max-width:768px)
  sidebar max-height cap, and add height:100%/max-height:none.
- Add regression tests asserting the narrow single-panel stack is uncapped
  while the tablet two-panel sidebar keeps its existing height cap.
- Add a patch changeset documenting the fix.

Files changed:
 .changeset/fn-7841-todo-mobile-height.md           |  7 ++++++
 packages/dashboard/app/components/TodoView.css     | 11 ++++++---
 .../__tests__/TodoView.mobile-css.test.ts          | 28 ++++++++++++++++++++++
 3 files changed, 43 insertions(+), 3 deletions(-)

Fusion-Task-Id: FN-7841
Fusion-Task-Lineage: e6b497ae-2568-4cae-8b48-7f57f45c8a23
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>

.changeset/fn-7841-todo-mobile-height.md

@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Fix the mobile Todo view so the list panel fills full height on selection.
+category: fix
+dev: TodoView.css — the single-panel narrow-container stack no longer inherits the @media (max-width:768px) sidebar max-height cap.

packages/dashboard/app/components/TodoView.css

@@ -662,11 +662,16 @@ NARROW container (right dock): collapse the side-by-side split into a single-pan
     gap: 0;
   }
 
-  /* Single panel at a time: full-width, owns its vertical scroll. */
-  .todo-view-sidebar,
-  .todo-view-main {
+  /*
+  FNXC:TodosStyling 2026-07-11-21:29:
+  Phone-width Todo uses a single-panel stack, so the visible LISTS or items panel must fill the full view instead of inheriting the later tablet sidebar cap. Keep this selector more specific than the viewport media rule so max-height stays uncapped while the tablet two-panel stack still reserves room for the items pane.
+  */
+  .todo-view-layout .todo-view-sidebar,
+  .todo-view-layout .todo-view-main {
     width: 100%;
     min-width: 0;
+    height: 100%;
+    max-height: none;
     flex: 1 1 auto;
     border-right: none;
     padding-right: 0;

packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts

@@ -1,6 +1,34 @@
 import { describe, expect, it } from "vitest";
 import { loadAllAppCss, loadAllAppCssBaseOnly } from "../../test/cssFixture";
 
+describe("TodoView mobile stack height CSS contract", () => {
+  it("uncaps both visible panels in the narrow single-panel stack", () => {
+    const css = loadAllAppCss();
+    const containerStart = css.indexOf("@container todo-view (max-width: 520px)");
+    const mediaStart = css.indexOf("@media (max-width: 768px)", containerStart);
+
+    expect(containerStart).toBeGreaterThanOrEqual(0);
+    expect(mediaStart).toBeGreaterThan(containerStart);
+
+    const narrowStackCss = css.slice(containerStart, mediaStart);
+
+    expect(narrowStackCss).toMatch(
+      /\.todo-view-layout \.todo-view-sidebar,\s*\.todo-view-layout \.todo-view-main\s*\{[^}]*height:\s*100%;[^}]*max-height:\s*none;[^}]*flex:\s*1 1 auto;[^}]*overflow-y:\s*auto;/,
+    );
+    expect(narrowStackCss).toMatch(/\.todo-view-layout\[data-mobile-stack-view="list"\] \.todo-view-main\s*\{[^}]*display:\s*none;/);
+    expect(narrowStackCss).toMatch(/\.todo-view-layout\[data-mobile-stack-view="detail"\] \.todo-view-sidebar\s*\{[^}]*display:\s*none;/);
+    expect(narrowStackCss).not.toMatch(/max-height:\s*calc\(var\(--space-2xl\) \* 6 \+ var\(--space-sm\)\)/);
+  });
+
+  it("retains the tablet two-panel sidebar height cap", () => {
+    const css = loadAllAppCss();
+
+    expect(css).toMatch(
+      /@media \(max-width:\s*768px\)[\s\S]*\.todo-view-sidebar\s*\{[^}]*max-height:\s*calc\(var\(--space-2xl\) \* 6 \+ var\(--space-sm\)\);/,
+    );
+  });
+});
+
 describe("TodoView action row CSS contract", () => {
   it("keeps todo item actions visible by default on desktop", () => {
     const baseCss = loadAllAppCssBaseOnly();