Skip to content

Commit 59b50e9

Browse files
committed
fix: commify fails when string contains < or >, responsiveness issues in mobile
1 parent c0c8158 commit 59b50e9

File tree

3 files changed

+7
-5
lines changed

3 files changed

+7
-5
lines changed

web/src/components/NumberDisplay.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from "react";
33
import { Tooltip } from "@kleros/ui-components-library";
44

55
import { commify } from "utils/commify";
6+
67
interface INumberDisplay {
78
value: string | number;
89
unit?: string;
@@ -21,7 +22,7 @@ const getFormattedValue = (value: number, decimals: number) => {
2122
return `> -0.${"0".repeat(decimals - 1)}1`;
2223
}
2324
}
24-
return withFixedDecimals;
25+
return commify(withFixedDecimals);
2526
};
2627

2728
const NumberDisplay: React.FC<INumberDisplay> = ({
@@ -33,8 +34,8 @@ const NumberDisplay: React.FC<INumberDisplay> = ({
3334
isCurrency = false,
3435
}) => {
3536
const parsedValue = Number(value);
36-
const formattedValue = commify(getFormattedValue(parsedValue, decimals));
37-
const tooltipValue = isCurrency ? `${unit} ${value}` : `${value} ${unit}`;
37+
const formattedValue = getFormattedValue(parsedValue, decimals);
38+
const tooltipValue = isCurrency ? `${unit} ${commify(value)}` : `${commify(value)} ${unit}`;
3839
const displayUnit = showUnitInDisplay ? unit : "";
3940
const displayValue = isCurrency ? `${displayUnit} ${formattedValue}` : `${formattedValue} ${displayUnit}`;
4041
return (

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ const Container = styled.div`
1111
display: flex;
1212
width: 100%;
1313
flex-direction: row;
14-
gap: 16px;
14+
gap: 8px 16px;
1515
align-items: center;
1616
justify-content: space-between;
17+
flex-wrap: wrap;
1718
1819
small {
1920
height: 100%;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const TotalStakeAndLockedPnk = styled.div`
5555

5656
const StyledPnkIcon = styled(PnkIcon)`
5757
fill: ${({ theme }) => theme.secondaryPurple};
58-
width: 14px;
58+
width: 16px;
5959
`;
6060

6161
const StyledLockerIcon = styled(LockerIcon)`

0 commit comments

Comments
 (0)