Fix light mode active request payload modal (#1714)

Integrated into release/v3.7.3 — fixes light mode payload modal transparency
This commit is contained in:
Randi
2026-04-28 07:31:48 -04:00
committed by GitHub
parent aa535748ef
commit 2f1c904d74
3 changed files with 27 additions and 3 deletions

View File

@@ -41,6 +41,7 @@
--color-bg-primary: #f9f9fb;
--color-bg-subtle: #f0f0f5;
--color-surface: #ffffff;
--color-card: #ffffff;
--color-sidebar: #f5f5fa;
--color-border: rgba(0, 0, 0, 0.08);
--color-text-main: #1a1a2e;
@@ -61,6 +62,7 @@
--color-bg-primary: #0b0e14;
--color-bg-subtle: #111520;
--color-surface: #161b22;
--color-card: #161b22;
--color-sidebar: #10141e;
--color-border: rgba(255, 255, 255, 0.08);
--color-text-main: #e6e6ef;
@@ -93,6 +95,7 @@
--color-bg-primary: var(--color-bg-primary);
--color-bg-subtle: var(--color-bg-subtle);
--color-surface: var(--color-surface);
--color-card: var(--color-card);
--color-sidebar: var(--color-sidebar);
--color-border: var(--color-border);
--color-text-main: var(--color-text-main);

View File

@@ -67,7 +67,7 @@ export default function ActiveRequestsPanel() {
}
return (
<div className="rounded-xl border border-border bg-card/70">
<div className="rounded-xl border border-border bg-surface">
<div className="flex items-center justify-between gap-4 border-b border-border px-4 py-3">
<div>
<h3 className="text-sm font-semibold uppercase tracking-wide text-text-main">
@@ -120,8 +120,8 @@ export default function ActiveRequestsPanel() {
</div>
{selectedRow && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 py-6">
<div className="flex max-h-[85vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 px-4 py-6 backdrop-blur-sm">
<div className="flex max-h-[85vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-border bg-surface shadow-2xl">
<div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
<div>
<h4 className="text-lg font-semibold text-text-main">

View File

@@ -257,6 +257,27 @@ describe("API Routes — dashboard and tool consumers", () => {
assertRouteMethods("src/app/api/usage/call-logs/[id]/route.ts", ["GET"]);
});
it("keeps the active request payload modal on opaque theme surfaces", () => {
const activeRequests = readProjectFile("src/shared/components/ActiveRequestsPanel.tsx");
const globals = readProjectFile("src/app/globals.css");
assert.ok(activeRequests, "ActiveRequestsPanel should exist");
assert.ok(globals, "globals.css should exist");
assert.match(globals, /--color-card:\s+#ffffff/);
assert.match(globals, /--color-card:\s+#161b22/);
assert.match(globals, /--color-card:\s+var\(--color-card\)/);
assert.match(activeRequests, /rounded-xl border border-border bg-surface/);
assert.match(activeRequests, /backdrop-blur-sm/);
assert.match(
activeRequests,
/rounded-2xl[^"]*border border-border[^"]*bg-surface[^"]*shadow-2xl/
);
assert.doesNotMatch(activeRequests, /bg-card\/70/);
assert.doesNotMatch(activeRequests, /rounded-2xl[^"]*bg-card/);
assert.doesNotMatch(activeRequests, /shadow-\[/);
assert.doesNotMatch(activeRequests, /border-black\/10/);
});
it("keeps usage quota wired through A2A and MCP tools", () => {
const quotaSkill = readProjectFile("src/lib/a2a/skills/quotaManagement.ts");
const mcpAdvancedTools = readProjectFile("open-sse/mcp-server/tools/advancedTools.ts");