diff --git a/.changeset/fn-7841-todo-mobile-height.md b/.changeset/fn-7841-todo-mobile-height.md new file mode 100644 index 0000000000..d838ef5c78 --- /dev/null +++ b/.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. diff --git a/packages/dashboard/app/components/TodoView.css b/packages/dashboard/app/components/TodoView.css index c60f098c3f..bcebdae69b 100644 --- a/packages/dashboard/app/components/TodoView.css +++ b/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; diff --git a/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts b/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts index cd186a9043..cbcd892435 100644 --- a/packages/dashboard/app/components/__tests__/TodoView.mobile-css.test.ts +++ b/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();