ef1a19be1b
Extend responsive popup positioning so mention suggestions stay above the composer on tablet and mobile layouts. - expand the AgentMentionPopup responsive media query from 768px to 1024px - update component CSS integration test expectations to assert the new tablet breakpoint - add focused CSS regression tests that lock desktop-below default and tablet/mobile above-input placement Files changed: .../app/__tests__/AgentMentionPopup.css.test.ts | 49 ++++++++++++++++++++++ .../dashboard/app/components/AgentMentionPopup.css | 2 +- .../__tests__/AgentMentionPopup.test.tsx | 4 +- 3 files changed, 52 insertions(+), 3 deletions(-) Fusion-Task-Id: FN-5734 Fusion-Task-Lineage: 85e30c08-7bdc-4d77-aa31-401bb4c4bb24
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { readFileSync } from "fs";
|
|
import { resolve } from "path";
|
|
|
|
function extractMediaBlocks(content: string, pattern: RegExp): string {
|
|
const blocks: string[] = [];
|
|
|
|
for (const match of content.matchAll(pattern)) {
|
|
const start = match.index! + match[0].length;
|
|
let index = start;
|
|
let depth = 1;
|
|
|
|
while (index < content.length && depth > 0) {
|
|
if (content[index] === "{") depth += 1;
|
|
if (content[index] === "}") depth -= 1;
|
|
index += 1;
|
|
}
|
|
|
|
expect(depth).toBe(0);
|
|
blocks.push(content.slice(start, index - 1));
|
|
}
|
|
|
|
expect(blocks.length).toBeGreaterThan(0);
|
|
return blocks.join("\n");
|
|
}
|
|
|
|
describe("AgentMentionPopup.css responsive positioning", () => {
|
|
const css = readFileSync(resolve(__dirname, "../components/AgentMentionPopup.css"), "utf8");
|
|
const tabletOrMobileBlock = extractMediaBlocks(
|
|
css,
|
|
/@media\s*\([^)]*max-width:\s*1024px[^)]*\)\s*\{/g,
|
|
);
|
|
|
|
it("keeps desktop default below positioning", () => {
|
|
const belowBlock = css.match(/\.agent-mention-popup--below\s*\{[^}]*\}/)?.[0] ?? "";
|
|
|
|
expect(belowBlock).toContain("top: calc(100% + var(--space-xs));");
|
|
});
|
|
|
|
it("forces above-input placement for below/above modifiers through tablet widths", () => {
|
|
const responsiveBlock =
|
|
tabletOrMobileBlock.match(
|
|
/\.agent-mention-popup--below,\s*\.agent-mention-popup--above\s*\{[^}]*\}/,
|
|
)?.[0] ?? "";
|
|
|
|
expect(responsiveBlock).toContain("bottom: calc(100% + var(--space-xs));");
|
|
expect(responsiveBlock).toContain("top: auto;");
|
|
});
|
|
});
|