From 28187cf36b45dff98ebceca0b9b146cacb80e9fe Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Wed, 10 Jun 2026 23:24:13 -0700 Subject: [PATCH 1/2] FUS-7 keep activity modal on screen Co-authored-by: multica-agent --- .../__tests__/activity-log-mobile-layout.test.ts | 14 ++++++++++---- packages/dashboard/app/components/ScriptsModal.css | 5 ++++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/dashboard/app/__tests__/activity-log-mobile-layout.test.ts b/packages/dashboard/app/__tests__/activity-log-mobile-layout.test.ts index 7390f1e466..73c47dbda0 100644 --- a/packages/dashboard/app/__tests__/activity-log-mobile-layout.test.ts +++ b/packages/dashboard/app/__tests__/activity-log-mobile-layout.test.ts @@ -42,12 +42,18 @@ describe("activity-log-mobile-layout.css", () => { // ── Modal sizing ──────────────────────────────────────────────────── - it("uses modal-lg base class for consistent wide sizing", () => { - // The activity-log-modal should NOT set its own max-width; modal-lg handles width + it("keeps desktop modal width within the viewport", () => { const modalBlock = cssContent.match(/\.activity-log-modal\s*\{[^}]*\}/)?.[0]; expect(modalBlock).toBeTruthy(); - // Should NOT contain max-width (handled by modal-lg base class) - expect(modalBlock).not.toMatch(/max-width:\s*\d+px/); + expect(modalBlock).toContain("width: min(95vw, 640px);"); + expect(modalBlock).toContain("max-width: 95vw;"); + }); + + it("keeps desktop modal height inside the visible viewport", () => { + const modalBlock = cssContent.match(/\.activity-log-modal\s*\{[^}]*\}/)?.[0]; + expect(modalBlock).toBeTruthy(); + expect(modalBlock).toMatch(/max-height:\s*calc\(100dvh - var\(--overlay-padding-top,\s*10vh\) - 16px\);/); + expect(modalBlock).toContain("overflow: hidden;"); }); // ── Close button ──────────────────────────────────────────────────── diff --git a/packages/dashboard/app/components/ScriptsModal.css b/packages/dashboard/app/components/ScriptsModal.css index 33be4d3ecd..5cd5795bab 100644 --- a/packages/dashboard/app/components/ScriptsModal.css +++ b/packages/dashboard/app/components/ScriptsModal.css @@ -1180,9 +1180,12 @@ /* ── Activity Log Modal ─────────────────────────────────────────── */ .activity-log-modal { - max-height: 80vh; + width: min(95vw, 640px); + max-width: 95vw; + max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - 16px); display: flex; flex-direction: column; + overflow: hidden; } .activity-log-header { From bf21b6b46359d908dc35e81ef19ae14e3119e736 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 11 Jun 2026 08:01:51 -0700 Subject: [PATCH 2/2] FUS-7 address activity modal review Co-authored-by: multica-agent --- ...ut.test.ts => activity-log-layout.test.ts} | 23 +++++++++++-------- .../dashboard/app/components/ScriptsModal.css | 2 +- 2 files changed, 15 insertions(+), 10 deletions(-) rename packages/dashboard/app/__tests__/{activity-log-mobile-layout.test.ts => activity-log-layout.test.ts} (90%) diff --git a/packages/dashboard/app/__tests__/activity-log-mobile-layout.test.ts b/packages/dashboard/app/__tests__/activity-log-layout.test.ts similarity index 90% rename from packages/dashboard/app/__tests__/activity-log-mobile-layout.test.ts rename to packages/dashboard/app/__tests__/activity-log-layout.test.ts index 73c47dbda0..537596c24a 100644 --- a/packages/dashboard/app/__tests__/activity-log-mobile-layout.test.ts +++ b/packages/dashboard/app/__tests__/activity-log-layout.test.ts @@ -1,19 +1,15 @@ import { describe, it, expect } from "vitest"; import { loadAllAppCss } from "../test/cssFixture"; -import { readFileSync } from "fs"; -import { resolve } from "path"; /** - * Stylesheet regression test for Activity Log mobile layout. + * Stylesheet regression test for Activity Log modal layout. * - * Parses `packages/dashboard/app/styles.css` and asserts that an - * `@media (max-width: 768px)` block contains Activity Log mobile rules - * for stacked/wrapped controls and entry layout. These selectors must - * remain inside a mobile media query so the Activity Log renders - * correctly on narrow screens. + * Parses the app CSS bundle and asserts that desktop viewport constraints + * keep the modal on screen while mobile rules keep controls usable on + * narrow screens. */ -describe("activity-log-mobile-layout.css", () => { +describe("activity-log-layout.css", () => { const cssContent = loadAllAppCss(); /** Extract all content inside @media (max-width: 768px) blocks. */ @@ -56,6 +52,15 @@ describe("activity-log-mobile-layout.css", () => { expect(modalBlock).toContain("overflow: hidden;"); }); + it("allows content pane to shrink and scroll inside the capped modal", () => { + const contentBlock = cssContent.match( + /\.activity-log-content\s*\{(?=[^}]*overflow-y:\s*auto;)(?=[^}]*min-height:\s*0;)[^}]*\}/, + )?.[0]; + expect(contentBlock).toBeTruthy(); + expect(contentBlock).toContain("overflow-y: auto;"); + expect(contentBlock).toContain("min-height: 0;"); + }); + // ── Close button ──────────────────────────────────────────────────── it("does not define a custom activity-log-close style (uses shared modal-close)", () => { diff --git a/packages/dashboard/app/components/ScriptsModal.css b/packages/dashboard/app/components/ScriptsModal.css index 5cd5795bab..0dd03147c3 100644 --- a/packages/dashboard/app/components/ScriptsModal.css +++ b/packages/dashboard/app/components/ScriptsModal.css @@ -1253,7 +1253,7 @@ flex: 1; overflow-y: auto; padding: var(--space-lg) var(--space-xl); - min-height: 300px; + min-height: 0; } .activity-log-empty {