From 6e8ffa08855bde6384a2ca0024c4bb5ca644222b Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Sat, 3 Jan 2026 13:20:42 +0000
Subject: [PATCH] fixed UserRound sizing

---
 packages/frontend/src/App.css               |  1 +
 packages/frontend/src/components/avatar.tsx | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/App.css b/packages/frontend/src/App.css
index 73da498..e6204b7 100644
--- a/packages/frontend/src/App.css
+++ b/packages/frontend/src/App.css
@@ -129,6 +129,7 @@
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
+    font-variant-ligatures: none;
 }
 
 .font-300 {
diff --git a/packages/frontend/src/components/avatar.tsx b/packages/frontend/src/components/avatar.tsx
index 2b0fd9d..b06aa23 100644
--- a/packages/frontend/src/components/avatar.tsx
+++ b/packages/frontend/src/components/avatar.tsx
@@ -1,4 +1,5 @@
 import { UserRound } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 const FALLBACK_COLOURS = [
     "bg-red-500",
@@ -58,7 +59,15 @@ export default function Avatar({
 
     return (
         <div
-            className={`flex items-center justify-center rounded-full text-white font-medium select-none ${name && "border"} ${!avatarURL && backgroundClass} w-${size || 6} h-${size || 6}`}
+            className={cn(
+                "flex items-center justify-center rounded-full",
+                "text-white font-medium select-none",
+                name && "border",
+                !avatarURL && backgroundClass,
+                "transition-colors",
+                `w-${size || 6}`,
+                `h-${size || 6}`,
+            )}
         >
             {avatarURL ? (
                 <img
@@ -69,7 +78,7 @@ export default function Avatar({
             ) : name ? (
                 <span className={textClass}>{getInitials(name)}</span>
             ) : (
-                <UserRound size={size ? size * 2 + 2 : 14} />
+                <UserRound className={"size-10"} />
             )}
         </div>
     );