From ec9c048156989c8504f1d4a26304e51cc7d2097a Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 9 Oct 2024 17:04:02 +0800
Subject: [PATCH] fix: button overflow

---
 app/[locale]/(main)/ClientComponents/NetworkChart.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
index c1732c9..f31fec1 100644
--- a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
+++ b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
@@ -89,13 +89,13 @@ export function NetworkChart({
 
   return (
     <Card>
-      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
-        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-4">
+      <CardHeader className="flex flex-col items-stretch space-y-0 p-0 sm:flex-row">
+        <div className="flex flex-none flex-col justify-center gap-1 border-b px-6 py-4">
           <CardTitle
             onClick={() => {
               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 />
             {chartData[chartDataKey[0]][0].server_name}
@@ -104,14 +104,14 @@ export function NetworkChart({
             {chartDataKey.length} {t("ServerMonitorCount")}
           </CardDescription>
         </div>
-        <div className="flex">
+        <div className="flex flex-wrap">
           {chartDataKey.map((key, index) => {
             const chart = key as keyof typeof chartConfig;
             return (
               <button
                 key={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)}
               >
                 <span className="whitespace-nowrap text-xs text-muted-foreground">