fix: commify fails when string contains < or >, responsiveness issues in mobile

Author: kemuru

web/src/components/NumberDisplay.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Tooltip } from "@kleros/ui-components-library";
 
 import { commify } from "utils/commify";
+
 interface INumberDisplay {
   value: string | number;
   unit?: string;
@@ -21,7 +22,7 @@ const getFormattedValue = (value: number, decimals: number) => {
       return `> -0.${"0".repeat(decimals - 1)}1`;
     }
   }
-  return withFixedDecimals;
+  return commify(withFixedDecimals);
 };
 
 const NumberDisplay: React.FC<INumberDisplay> = ({
@@ -33,8 +34,8 @@ const NumberDisplay: React.FC<INumberDisplay> = ({
   isCurrency = false,
 }) => {
   const parsedValue = Number(value);
-  const formattedValue = commify(getFormattedValue(parsedValue, decimals));
-  const tooltipValue = isCurrency ? `${unit} ${value}` : `${value} ${unit}`;
+  const formattedValue = getFormattedValue(parsedValue, decimals);
+  const tooltipValue = isCurrency ? `${unit} ${commify(value)}` : `${commify(value)} ${unit}`;
   const displayUnit = showUnitInDisplay ? unit : "";
   const displayValue = isCurrency ? `${displayUnit} ${formattedValue}` : `${formattedValue} ${displayUnit}`;
   return (

web/src/pages/Profile/Stakes/CourtCard/CourtName.tsx

@@ -11,9 +11,10 @@ const Container = styled.div`
   display: flex;
   width: 100%;
   flex-direction: row;
-  gap: 16px;
+  gap: 8px 16px;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
 
   small {
     height: 100%;

web/src/pages/Profile/Stakes/Header.tsx

@@ -55,7 +55,7 @@ const TotalStakeAndLockedPnk = styled.div`
 
 const StyledPnkIcon = styled(PnkIcon)`
   fill: ${({ theme }) => theme.secondaryPurple};
-  width: 14px;
+  width: 16px;
 `;
 
 const StyledLockerIcon = styled(LockerIcon)`