From d8a568076d7a116df5ccb23c71ec2fa8c27fd559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 1 Mar 2026 08:00:32 +0100
Subject: [PATCH] fix: use Tailwind class for bar fill (--primary is hex, not
 HSL)

---
 components/units/VisualComparison.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/units/VisualComparison.tsx b/components/units/VisualComparison.tsx
index b18f1b2..7b333e0 100644
--- a/components/units/VisualComparison.tsx
+++ b/components/units/VisualComparison.tsx
@@ -199,13 +199,10 @@ export default function VisualComparison({ conversions, onValueChange }: VisualC
             >
               <div
                 className={cn(
-                  'absolute inset-y-0 left-0 rounded-sm',
+                  'absolute inset-y-0 left-0 rounded-sm bg-primary/65',
                   draggingUnit ? 'transition-none' : 'transition-all duration-500 ease-out'
                 )}
-                style={{
-                  width: `${displayPercentage}%`,
-                  background: 'linear-gradient(to right, hsl(var(--primary) / 0.35), hsl(var(--primary) / 0.75))',
-                }}
+                style={{ width: `${displayPercentage}%` }}
               />
               {isDraggable && !isDragging && (
                 <div className="absolute inset-0 flex items-center justify-end px-2 opacity-0 hover:opacity-100 transition-opacity">