FUS-7 keep activity modal on screen

Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
gsxdsm
2026-06-10 23:24:13 -07:00
parent 045a74d249
commit 28187cf36b
2 changed files with 14 additions and 5 deletions

View File

@@ -42,12 +42,18 @@ describe("activity-log-mobile-layout.css", () => {
// ── Modal sizing ──────────────────────────────────────────────────── // ── Modal sizing ────────────────────────────────────────────────────
it("uses modal-lg base class for consistent wide sizing", () => { it("keeps desktop modal width within the viewport", () => {
// The activity-log-modal should NOT set its own max-width; modal-lg handles width
const modalBlock = cssContent.match(/\.activity-log-modal\s*\{[^}]*\}/)?.[0]; const modalBlock = cssContent.match(/\.activity-log-modal\s*\{[^}]*\}/)?.[0];
expect(modalBlock).toBeTruthy(); expect(modalBlock).toBeTruthy();
// Should NOT contain max-width (handled by modal-lg base class) expect(modalBlock).toContain("width: min(95vw, 640px);");
expect(modalBlock).not.toMatch(/max-width:\s*\d+px/); 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 ──────────────────────────────────────────────────── // ── Close button ────────────────────────────────────────────────────

View File

@@ -1180,9 +1180,12 @@
/* ── Activity Log Modal ─────────────────────────────────────────── */ /* ── Activity Log Modal ─────────────────────────────────────────── */
.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; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
.activity-log-header { .activity-log-header {