diff --git a/.changeset/fn-7972-agents-controls-overlap.md b/.changeset/fn-7972-agents-controls-overlap.md
new file mode 100644
index 0000000000..066bdb81ce
--- /dev/null
+++ b/.changeset/fn-7972-agents-controls-overlap.md
@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Fix Agents controls panel overlapping surrounding content on narrow viewports.
+category: fix
+dev: Elevated the .agent-controls-panel stacking context in AgentsView.css so the open controls popover sits above agent cards and token usage.
diff --git a/packages/dashboard/app/components/AgentsView.css b/packages/dashboard/app/components/AgentsView.css
index 597969d478..c7d306c698 100644
--- a/packages/dashboard/app/components/AgentsView.css
+++ b/packages/dashboard/app/components/AgentsView.css
@@ -101,6 +101,14 @@ The former scoped overrides (.agents-view .view-header padding/border/background
   gap: var(--space-sm);
 }
 
+/*
+ FNXC:AgentsControlsOverlay 2026-07-15-00:00:
+ FN-7972 requires the open controls panel to layer above agent cards and Token Usage on desktop and mobile. Elevate only its active anchor so unrelated dashboard overlays keep their existing stacking order.
+*/
+.agents-view-primary-actions--controls-open {
+  z-index: 50;
+}
+
 .agent-controls-trigger {
   white-space: nowrap;
 }
diff --git a/packages/dashboard/app/components/AgentsView.tsx b/packages/dashboard/app/components/AgentsView.tsx
index 7683d62bd1..7aa5e562d3 100644
--- a/packages/dashboard/app/components/AgentsView.tsx
+++ b/packages/dashboard/app/components/AgentsView.tsx
@@ -1401,7 +1401,7 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
               <Network size={16} />
             </button>
           </div>
-          <div className="agents-view-primary-actions">
+          <div className={`agents-view-primary-actions${isControlsPanelOpen ? " agents-view-primary-actions--controls-open" : ""}`}>
             <button
               ref={controlsTriggerRef}
               className={`btn-icon agent-controls-trigger${isControlsPanelOpen ? " agent-controls-trigger--active" : ""}`}
diff --git a/packages/dashboard/app/components/__tests__/AgentsView.test.tsx b/packages/dashboard/app/components/__tests__/AgentsView.test.tsx
index 6b847e66e1..3f16516091 100644
--- a/packages/dashboard/app/components/__tests__/AgentsView.test.tsx
+++ b/packages/dashboard/app/components/__tests__/AgentsView.test.tsx
@@ -647,13 +647,15 @@ describe("AgentsView", () => {
       });
     });
 
-    it("keeps New Agent directly accessible on desktop while controls live in popup", async () => {
-      renderView(<AgentsView addToast={mockAddToast} />);
+    it("keeps New Agent directly accessible on desktop while controls live in an elevated popup", async () => {
+      const { container } = renderView(<AgentsView addToast={mockAddToast} />);
 
       expect(screen.getByRole("button", { name: "New Agent" })).toBeTruthy();
       expect(screen.queryByRole("dialog", { name: "Agent controls" })).toBeNull();
+      expect(container.querySelector(".agents-view-primary-actions--controls-open")).toBeNull();
 
       await openControlsPanel();
+      expect(container.querySelector(".agents-view-primary-actions--controls-open")).toBeTruthy();
       expect(screen.getByLabelText("Filter agents by state")).toBeTruthy();
       expect(screen.getByLabelText("Show system agents")).toBeTruthy();
       expect(screen.getAllByRole("button", { name: "Import" }).length).toBeGreaterThan(0);
@@ -661,14 +663,15 @@ describe("AgentsView", () => {
       expect(screen.getByLabelText("Heartbeat speed preset")).toBeTruthy();
     });
 
-    it("moves import and new-agent actions into the controls popup on mobile", async () => {
+    it("moves import and new-agent actions into an elevated controls popup on mobile", async () => {
       mockViewportMode.mockReturnValue("mobile");
-      renderView(<AgentsView addToast={mockAddToast} />);
+      const { container } = renderView(<AgentsView addToast={mockAddToast} />);
 
       expect(screen.queryByRole("button", { name: "Import" })).toBeNull();
       expect(screen.queryByRole("button", { name: "New Agent" })).toBeNull();
 
       await openControlsPanel();
+      expect(container.querySelector(".agents-view-primary-actions--controls-open")).toBeTruthy();
       expect(screen.getByRole("button", { name: "Import" })).toBeTruthy();
       expect(screen.getByRole("button", { name: "New Agent" })).toBeTruthy();
     });
@@ -1629,10 +1632,14 @@ describe("AgentsView", () => {
       expect(css).toContain("pointer-events: none");
     });
 
-    it("keeps a compact mobile Agents label visible, anchors the controls popup to the action row, and expands view toggles to 36px touch targets", () => {
+    it("keeps a compact mobile Agents label visible, elevates the open controls overlay above Agents content, and expands view toggles to 36px touch targets", () => {
       const css = loadAllAppCss();
+      const mobileCss = css.slice(css.indexOf("@media (max-width: 768px)"));
       expect(css).toContain(".agents-view-primary-actions {\n  position: relative;");
+      expect(css).toContain(".agents-view-primary-actions--controls-open {\n  z-index: 50;\n}");
       expect(css).toContain(".agent-controls-panel {\n  position: absolute;\n  top: calc(100% + var(--space-sm));\n  right: 0;");
+      expect(css).toContain("background: var(--card);");
+      expect(mobileCss).not.toMatch(/\.agents-view-primary-actions--controls-open\s*\{[^}]*z-index:\s*(?:auto|0)/);
       expect(css).toContain(".agents-view-title h2 {\n    display: block;\n    font-size: var(--space-lg);");
       expect(css).toContain(".agent-controls-mobile-actions {");
       expect(css).toContain(".agent-controls-mobile-actions .btn {");