fix(FN-4117): render mobile mention popup above the composer

- Force the agent mention popup to anchor above the input on mobile layouts
- Add regression coverage for the mobile media-query positioning and popup modifier classes
- Add a patch changeset for the published CLI package documenting the mobile popup fix

Fusion-Task-Id: FN-4117

.changeset/fn-4117-mention-popup-mobile.md

@@ -0,0 +1,5 @@
+---
+"@runfusion/fusion": patch
+---
+
+Mobile chat composer now renders the agent mention popup above the input.

packages/dashboard/app/components/AgentMentionPopup.css

@@ -108,5 +108,12 @@
     min-width: 200px;
     max-width: min(280px, 100%);
   }
+
+  .agent-mention-popup--below,
+  .agent-mention-popup--above {
+    bottom: calc(100% + var(--space-xs));
+    top: auto;
+    left: 0;
+  }
 }
 

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

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import type { Agent } from "@fusion/core";
 import { AgentMentionPopup } from "../AgentMentionPopup";
+import { loadAllAppCss } from "../../test/cssFixture";
 
 vi.mock("lucide-react", async (importOriginal) => {
   const actual = await importOriginal<typeof import("lucide-react")>();
@@ -128,6 +129,44 @@ describe("AgentMentionPopup", () => {
     expect(screen.getByText("No agents found")).toBeInTheDocument();
   });
 
+  it("keeps the below modifier class when rendered below", () => {
+    render(
+      <AgentMentionPopup
+        agents={agents}
+        filter=""
+        highlightedIndex={0}
+        visible={true}
+        onSelect={vi.fn()}
+        position="below"
+      />,
+    );
+
+    expect(screen.getByTestId("agent-mention-popup")).toHaveClass("agent-mention-popup--below");
+  });
+
+  it("keeps the above modifier class when rendered above", () => {
+    render(
+      <AgentMentionPopup
+        agents={agents}
+        filter=""
+        highlightedIndex={0}
+        visible={true}
+        onSelect={vi.fn()}
+        position="above"
+      />,
+    );
+
+    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 () => {
+    const css = await loadAllAppCss();
+
+    expect(css).toMatch(
+      /@media\s*\(max-width:\s*768px\)\s*\{\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;[^}]*\}/,
+    );
+  });
+
   it("shows room sections with members first and member dot label", () => {
     render(
       <AgentMentionPopup