FN-5734: render agent mention popup above input on tablet widths

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

packages/dashboard/app/__tests__/AgentMentionPopup.css.test.ts

@@ -0,0 +1,49 @@
+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;");
+  });
+});

packages/dashboard/app/components/AgentMentionPopup.css

@@ -103,7 +103,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
   .agent-mention-popup {
     min-width: 200px;
     max-width: min(280px, 100%);

packages/dashboard/app/components/__tests__/AgentMentionPopup.test.tsx

@@ -159,11 +159,11 @@ describe("AgentMentionPopup", () => {
     expect(screen.getByTestId("agent-mention-popup")).toHaveClass("agent-mention-popup--above");
   });
 
-  it("anchors the below modifier above the input inside the mobile media query", async () => {
+  it("anchors the below modifier above the input through tablet media query", async () => {
     const css = await loadAllAppCss();
 
     expect(css).toMatch(
-      /@media[^{]*\(max-width:\s*768px\)[^{]*\{\s*\.agent-mention-popup\s*\{[^}]*\}\s*\.agent-mention-popup--below,\s*\.agent-mention-popup--above\s*\{[^}]*bottom:\s*calc\(100%\s*\+\s*var\(--space-xs\)\);[^}]*top:\s*auto;[^}]*\}/,
+      /@media[^{]*\(max-width:\s*1024px\)[^{]*\{\s*\.agent-mention-popup\s*\{[^}]*\}\s*\.agent-mention-popup--below,\s*\.agent-mention-popup--above\s*\{[^}]*bottom:\s*calc\(100%\s*\+\s*var\(--space-xs\)\);[^}]*top:\s*auto;[^}]*\}/,
     );
   });