From e5495ac0d84b9eb94d14f394649fb57158765a82 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 23:22:06 +0100
Subject: [PATCH] fix: resolve TS2322 ref type error and Tailwind class
 conflict in Mascot

- Change SvgProps.svgRef to React.Ref<SVGSVGElement> for React 18 compat
- className now replaces default w-32/h-32 instead of appending (avoids
  Tailwind specificity conflicts)
- Replace inline style={{ position: 'relative' }} with Tailwind 'relative'
---
 packages/web/src/components/ui/Mascot.tsx             |  6 ++----
 .../web/src/components/ui/__tests__/Mascot.test.tsx   | 11 ++++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/components/ui/Mascot.tsx b/packages/web/src/components/ui/Mascot.tsx
index 01bc0087..6513bac8 100644
--- a/packages/web/src/components/ui/Mascot.tsx
+++ b/packages/web/src/components/ui/Mascot.tsx
@@ -18,7 +18,7 @@ interface MascotProps {
 interface SvgProps {
   palette: (typeof MASCOT_PALETTES)[MascotState];
   gradientId: string;
-  svgRef: React.RefObject<SVGSVGElement | null>;
+  svgRef: React.Ref<SVGSVGElement>;
 }
 
 function IdleSvg({ palette, gradientId, svgRef }: SvgProps) {
@@ -240,10 +240,8 @@ export function Mascot({ state, className }: MascotProps) {
 
   useMascotAnimation(svgRef, containerRef, state);
 
-  const classes = className ? `w-32 h-32 ${className}` : 'w-32 h-32';
-
   return (
-    <div ref={containerRef} role="presentation" className={classes} style={{ position: 'relative' }}>
+    <div ref={containerRef} role="presentation" className={`relative ${className ?? 'w-32 h-32'}`}>
       {state === 'idle' && <IdleSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
       {state === 'sleeping' && <SleepingSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
       {state === 'excited' && <ExcitedSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
diff --git a/packages/web/src/components/ui/__tests__/Mascot.test.tsx b/packages/web/src/components/ui/__tests__/Mascot.test.tsx
index a269668d..9ee807de 100644
--- a/packages/web/src/components/ui/__tests__/Mascot.test.tsx
+++ b/packages/web/src/components/ui/__tests__/Mascot.test.tsx
@@ -94,11 +94,20 @@ describe('Mascot', () => {
     expect(shadow).toBeTruthy();
   });
 
-  it('applies custom className', () => {
+  it('applies custom className replacing default size', () => {
     const { container } = render(<Mascot state="idle" className="w-48 h-48" />);
     const wrapper = container.firstElementChild as HTMLElement;
     expect(wrapper.className).toContain('w-48');
     expect(wrapper.className).toContain('h-48');
+    // Custom className replaces default w-32 h-32 to avoid Tailwind conflicts
+    expect(wrapper.className).not.toContain('w-32');
+  });
+
+  it('uses default w-32 h-32 when no className provided', () => {
+    const { container } = render(<Mascot state="idle" />);
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper.className).toContain('w-32');
+    expect(wrapper.className).toContain('h-32');
   });
 
   it('renders the sleeping mouth ellipse', () => {