fix country flag sizing

projects/website/src/components/country-flag.tsx

@@ -8,13 +8,13 @@ type Props = {
 
 export default function CountryFlag({ code, size = 24 }: Props) {
   return (
-    <Tooltip display={<p>{normalizedRegionName(code)}</p>} asChild={false}>
+    <Tooltip display={<p>{normalizedRegionName(code)}</p>} className={`w-[${size * 2}px] min-w-[${size * 2}px]`}>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         alt="Player Country"
         src={`/assets/flags/${code.toLowerCase()}.png`}
         width={size * 2}
-        className={`w-[${size * 2}px] object-contain`}
+        className={`w-[${size * 2}px] min-w-[${size * 2}px] object-contain`}
       />
     </Tooltip>
   );

projects/website/src/components/tooltip.tsx

@@ -16,16 +16,23 @@ type Props = {
    */
   asChild?: boolean;
 
+  /**
+   * The additional class names
+   */
+  className?: string;
+
   /**
    * Where the tooltip will be displayed
    */
   side?: "top" | "bottom" | "left" | "right";
 };
 
-export default function Tooltip({ children, display, asChild = true, side = "top" }: Props) {
+export default function Tooltip({ children, display, asChild = true, side = "top", className }: Props) {
   return (
     <ShadCnTooltip>
-      <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
+      <TooltipTrigger className={className} asChild={asChild}>
+        {children}
+      </TooltipTrigger>
       <TooltipContent side={side}>{display}</TooltipContent>
     </ShadCnTooltip>
   );