chuni: fix rating button wrapping

This commit is contained in:
sk1982 2024-03-12 23:42:44 -04:00
parent 8f781ba532
commit 85b8315298

View File

@ -48,20 +48,22 @@ export const ChuniTopRatingSidebar = ({ rating }: { rating: Awaited<ReturnType<t
{(shownRating === 'top' ? topAvg : recentAvg).toFixed(2)} {(shownRating === 'top' ? topAvg : recentAvg).toFixed(2)}
</ChuniRating> </ChuniRating>
</div> </div>
<div className="flex items-center justify-center overflow-hidden h-32 md:hidden"> <div className="flex items-center max-w-full md:hidden flex-wrap">
{shownRating && <div className="flex items-baseline mb-2"> {shownRating && <div className="flex items-baseline mb-2 mr-auto">
Average:&nbsp; Average:&nbsp;
<ChuniRating className="text-xl" rating={+(shownRating === 'top' ? topAvg : recentAvg).mul(100)}> <ChuniRating className="text-xl" rating={+(shownRating === 'top' ? topAvg : recentAvg).mul(100)}>
{(shownRating === 'top' ? topAvg : recentAvg).toFixed(2)} {(shownRating === 'top' ? topAvg : recentAvg).toFixed(2)}
</ChuniRating> </ChuniRating>
</div>} </div>}
<span className="text-lg mr-6 font-semibold pb-2 ml-auto">Ratings</span> <div className="ml-auto flex items-center justify-center flex-wrap">
<span className="text-lg mr-6 font-semibold pb-2">Ratings</span>
<ButtonGroup size="md" className="mb-2 h-full"> <ButtonGroup size="md" className="mb-2 h-full">
<Button color={shownRating === 'top' ? 'primary' : 'default'} onClick={() => setShownRating('top')}>Top</Button> <Button color={shownRating === 'top' ? 'primary' : 'default'} onClick={() => setShownRating('top')}>Top</Button>
<Button color={shownRating === 'recent' ? 'primary' : 'default'} onClick={() => setShownRating('recent')}>Recent</Button> <Button color={shownRating === 'recent' ? 'primary' : 'default'} onClick={() => setShownRating('recent')}>Recent</Button>
<Button color={shownRating === null ? 'primary' : 'default'} onClick={() => setShownRating(null)}>Hide</Button> <Button color={shownRating === null ? 'primary' : 'default'} onClick={() => setShownRating(null)}>Hide</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
</div>
{shownRating && <ChuniTopRating rating={shownRating === 'top' ? rating.top : rating.recent.slice(0, 10)} />} {shownRating && <ChuniTopRating rating={shownRating === 'top' ? rating.top : rating.recent.slice(0, 10)} />}
</div> </div>
</div>); </div>);