From a5eac5572e768c11bc499609cef315ceeec21061 Mon Sep 17 00:00:00 2001
From: Mark Greene <markgreene5833@gmail.com>
Date: Mon, 5 Oct 2026 17:20:52 +1300
Subject: [PATCH 1/2] Fix: remove background sliver under equalizer toggle
 gradient

On some browsers a thin sliver of the Insanity banner showed through along the rounded edges of the equalizer toggle, most visibly on the right where the gradient is opaque. The banner and the gradient were painted on two separately clipped elements, so their anti-aliased edges didn't line up.

- Moved the gradient onto the outer box as the top layer of its `backgroundImage`, above the banner
- Removed the separate gradient layer from the inner flex

Fixes #297
---
 .../components/Equalizer.tsx                     | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx
index d06240059..f9c29e521 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx
@@ -29,22 +29,16 @@ export function Equalizer() {
         style={{
           cursor: "pointer",
           borderRadius: "var(--radius-3)",
-          backgroundImage: `url(${alias("api", `/gamemodes/Insanity/banner.webp`)})`,
+          backgroundImage: `
+            linear-gradient(90deg, var(--black-a3), var(--gray-1)),
+            url(${alias("api", `/gamemodes/Insanity/banner.webp`)})
+          `,
           backgroundSize: "cover",
           backgroundPosition: "50% 25%",
           overflow: "hidden",
         }}
       >
-        <Flex
-          align="center"
-          width="100%"
-          justify="between"
-          p="4"
-          style={{
-            background:
-              "linear-gradient(90deg, var(--black-a3), var(--gray-1))",
-          }}
-        >
+        <Flex align="center" width="100%" justify="between" p="4">
           <Text
             style={{
               textShadow: "0 0 var(--space-1) var(--black-a12)",

From 0e7b020d60baaf4e2d500caff8600474515dba85 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 7 Oct 2026 16:48:08 -0500
Subject: [PATCH 2/2] fix sliver

---
 .../CharacteristicsSection/components/Equalizer.tsx         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx
index f9c29e521..8c5b2771b 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Equalizer.tsx
@@ -28,17 +28,17 @@ export function Equalizer() {
         width="100%"
         style={{
           cursor: "pointer",
-          borderRadius: "var(--radius-3)",
+          borderRadius: "var(--radius-3) 0 0  var(--radius-3)",
           backgroundImage: `
             linear-gradient(90deg, var(--black-a3), var(--gray-1)),
             url(${alias("api", `/gamemodes/Insanity/banner.webp`)})
           `,
-          backgroundSize: "cover",
+          backgroundSize: "auto, fit",
           backgroundPosition: "50% 25%",
           overflow: "hidden",
         }}
       >
-        <Flex align="center" width="100%" justify="between" p="4">
+        <Flex align="center" width="100%" justify="between" p="4" style={{}}>
           <Text
             style={{
               textShadow: "0 0 var(--space-1) var(--black-a12)",