fix: button overflow

This commit is contained in:
hamster1963 2024-10-09 17:04:02 +08:00
parent 50e0f500cf
commit ec9c048156

View File

@ -89,13 +89,13 @@ export function NetworkChart({
return ( return (
<Card> <Card>
<CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row"> <CardHeader className="flex flex-col items-stretch space-y-0 p-0 sm:flex-row">
<div className="flex flex-1 flex-col justify-center gap-1 px-6 py-4"> <div className="flex flex-none flex-col justify-center gap-1 border-b px-6 py-4">
<CardTitle <CardTitle
onClick={() => { onClick={() => {
router.push(`/${locale}/`); router.push(`/${locale}/`);
}} }}
className="flex cursor-pointer items-center gap-0.5 text-xl" className="flex flex-none cursor-pointer items-center gap-0.5 text-xl"
> >
<BackIcon /> <BackIcon />
{chartData[chartDataKey[0]][0].server_name} {chartData[chartDataKey[0]][0].server_name}
@ -104,14 +104,14 @@ export function NetworkChart({
{chartDataKey.length} {t("ServerMonitorCount")} {chartDataKey.length} {t("ServerMonitorCount")}
</CardDescription> </CardDescription>
</div> </div>
<div className="flex"> <div className="flex flex-wrap">
{chartDataKey.map((key, index) => { {chartDataKey.map((key, index) => {
const chart = key as keyof typeof chartConfig; const chart = key as keyof typeof chartConfig;
return ( return (
<button <button
key={key} key={key}
data-active={activeChart === key} data-active={activeChart === key}
className={`relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6 ${index !== 0 ? "border-l" : ""} `} className={`relative z-30 flex flex-1 flex-col justify-center gap-1 border-b px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
onClick={() => setActiveChart(key as keyof typeof chartConfig)} onClick={() => setActiveChart(key as keyof typeof chartConfig)}
> >
<span className="whitespace-nowrap text-xs text-muted-foreground"> <span className="whitespace-nowrap text-xs text-muted-foreground">