From 9d2a8d91087043b433ae384ebf1677cdb5ef509b Mon Sep 17 00:00:00 2001
From: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
Date: Mon, 1 Jun 2026 14:25:23 +0200
Subject: [PATCH] fix(ui): improve background glow contrast (#11409)

---
 .../ui/main-layout/main-layout.test.tsx       | 37 +++++++++++++++++++
 ui/components/ui/main-layout/main-layout.tsx  |  4 +-
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 ui/components/ui/main-layout/main-layout.test.tsx

diff --git a/ui/components/ui/main-layout/main-layout.test.tsx b/ui/components/ui/main-layout/main-layout.test.tsx
new file mode 100644
index 0000000000..3e51bbed36
--- /dev/null
+++ b/ui/components/ui/main-layout/main-layout.test.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import MainLayout from "./main-layout";
+
+vi.mock("@/hooks/use-sidebar", () => ({
+  useSidebar: vi.fn(),
+}));
+
+vi.mock("@/hooks/use-store", () => ({
+  useStore: () => ({
+    getOpenState: () => true,
+    settings: { disabled: false },
+  }),
+}));
+
+vi.mock("../sidebar/sidebar", () => ({
+  Sidebar: () => <aside data-testid="sidebar" />,
+}));
+
+describe("MainLayout", () => {
+  it("renders subdued background glows for side-nav contrast", () => {
+    render(
+      <MainLayout>
+        <div>Page content</div>
+      </MainLayout>,
+    );
+
+    const topGlow =
+      screen.getByTestId("sidebar").previousElementSibling
+        ?.previousElementSibling;
+    const bottomGlow = screen.getByTestId("sidebar").previousElementSibling;
+
+    expect(topGlow).toHaveClass("h-[120%]", "w-[160%]", "opacity-[7%]");
+    expect(bottomGlow).toHaveClass("h-[50%]", "w-[50%]", "opacity-[7%]");
+  });
+});
diff --git a/ui/components/ui/main-layout/main-layout.tsx b/ui/components/ui/main-layout/main-layout.tsx
index 1fc68b8b29..831eda7899 100644
--- a/ui/components/ui/main-layout/main-layout.tsx
+++ b/ui/components/ui/main-layout/main-layout.tsx
@@ -17,7 +17,7 @@ export default function MainLayout({
     <div className="relative flex h-dvh items-center justify-center overflow-hidden">
       {/* Top-left gradient halo */}
       <div
-        className="pointer-events-none fixed top-0 left-0 z-0 size-[600px] opacity-20 blur-3xl"
+        className="pointer-events-none fixed top-0 left-0 z-0 h-[120%] w-[160%] opacity-[7%] blur-3xl"
         style={{
           background: "linear-gradient(90deg, #31E59F 0%, #60E0EC 100%)",
           transform: "translate(-50%, -50%)",
@@ -26,7 +26,7 @@ export default function MainLayout({
 
       {/* Bottom-right gradient halo */}
       <div
-        className="pointer-events-none fixed right-0 bottom-0 z-0 size-[600px] opacity-20 blur-3xl"
+        className="pointer-events-none fixed right-0 bottom-0 z-0 h-[50%] w-[50%] opacity-[7%] blur-3xl"
         style={{
           background: "linear-gradient(90deg, #31E59F 0%, #60E0EC 100%)",
           transform: "translate(50%, 50%)",