fix(FN-4112): remove mobile preset grid scroll cap
- Remove the inner preset grid max-height and overflow cap in the New Agent dialog mobile layout - Add a dashboard CSS regression test that asserts the mobile media block keeps the preset grid fully visible - Add a patch changeset for @runfusion/fusion covering the mobile blank-space fix Fusion-Task-Id: FN-4112
This commit is contained in:
5
.changeset/fn-4112-new-agent-mobile-blank-space.md
Normal file
5
.changeset/fn-4112-new-agent-mobile-blank-space.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix blank space at the bottom of the New Agent dialog on mobile by removing the inner preset-grid scroll cap so the dialog body scrolls naturally.
|
||||||
@@ -670,4 +670,9 @@
|
|||||||
.agent-dialog-interview-btn {
|
.agent-dialog-interview-btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.agent-presets-grid {
|
||||||
|
max-height: none;
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||||
|
import { loadAllAppCss } from "../../test/cssFixture";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { render, screen, fireEvent, waitFor, within, act } from "@testing-library/react";
|
import { render, screen, fireEvent, waitFor, within, act } from "@testing-library/react";
|
||||||
import userEvent from "@testing-library/user-event";
|
import userEvent from "@testing-library/user-event";
|
||||||
@@ -191,6 +192,28 @@ function getStepZeroField(label: string | RegExp) {
|
|||||||
return screen.getByLabelText(label);
|
return screen.getByLabelText(label);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function extractMobileMediaBlocks(content: string): string {
|
||||||
|
const blocks: string[] = [];
|
||||||
|
const regex = /@media\s*\(\s*max-width:\s*768px\s*\)\s*\{/g;
|
||||||
|
let match: RegExpExecArray | null;
|
||||||
|
|
||||||
|
while ((match = regex.exec(content)) !== null) {
|
||||||
|
const startIdx = match.index + match[0].length;
|
||||||
|
let braceCount = 1;
|
||||||
|
let endIdx = startIdx;
|
||||||
|
while (braceCount > 0 && endIdx < content.length) {
|
||||||
|
if (content[endIdx] === "{") braceCount++;
|
||||||
|
if (content[endIdx] === "}") braceCount--;
|
||||||
|
endIdx++;
|
||||||
|
}
|
||||||
|
if (braceCount === 0) {
|
||||||
|
blocks.push(content.slice(startIdx, endIdx - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return blocks.join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
describe("NewAgentDialog", () => {
|
describe("NewAgentDialog", () => {
|
||||||
const mockOnClose = vi.fn();
|
const mockOnClose = vi.fn();
|
||||||
const mockOnCreated = vi.fn();
|
const mockOnCreated = vi.fn();
|
||||||
@@ -205,6 +228,14 @@ describe("NewAgentDialog", () => {
|
|||||||
mockFetchDiscoveredSkills.mockResolvedValue(MOCK_SKILLS_RESPONSE);
|
mockFetchDiscoveredSkills.mockResolvedValue(MOCK_SKILLS_RESPONSE);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("mobile layout", () => {
|
||||||
|
it("removes the preset grid scroll cap inside the mobile media block", () => {
|
||||||
|
const mobileCss = extractMobileMediaBlocks(loadAllAppCss());
|
||||||
|
|
||||||
|
expect(mobileCss).toMatch(/\.agent-presets-grid\s*\{[^}]*max-height:\s*none;[^}]*overflow-y:\s*visible;/);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe("modal visibility", () => {
|
describe("modal visibility", () => {
|
||||||
it("renders nothing when isOpen is false", () => {
|
it("renders nothing when isOpen is false", () => {
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
|
|||||||
Reference in New Issue
Block a user