[Glitch] Fix a few visual issues with annual reports in web UI

Port 32e5e1d3f1 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2024-11-12 13:35:35 +01:00
committed by Claire
parent e98891f4e5
commit e86c1c814b
4 changed files with 24 additions and 11 deletions

View File

@@ -7,16 +7,17 @@ export const MostUsedHashtag: React.FC<{
}> = ({ data }) => {
const hashtag = data[0];
if (!hashtag) {
return (
<div className='annual-report__bento__box annual-report__summary__most-used-hashtag' />
);
}
return (
<div className='annual-report__bento__box annual-report__summary__most-used-hashtag'>
<div className='annual-report__summary__most-used-hashtag__hashtag'>
#{hashtag.name}
{hashtag ? (
<>#{hashtag.name}</>
) : (
<FormattedMessage
id='annual_report.summary.most_used_hashtag.none'
defaultMessage='None'
/>
)}
</div>
<div className='annual-report__summary__most-used-hashtag__label'>
<FormattedMessage

View File

@@ -22,9 +22,9 @@ export const Percentile: React.FC<{
percentage: () => (
<div className='annual-report__summary__percentile__number'>
<FormattedNumber
value={percentile / 100}
value={Math.min(percentile, 99) / 100}
style='percent'
maximumFractionDigits={1}
maximumFractionDigits={percentile < 1 ? 1 : 0}
/>
</div>
),