diff --git a/src/components/NetworkChart.tsx b/src/components/NetworkChart.tsx
index a48420e..a80daab 100644
--- a/src/components/NetworkChart.tsx
+++ b/src/components/NetworkChart.tsx
@@ -134,7 +134,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
         <button
           key={key}
           data-active={activeChart === key}
-          className={`relative z-30 flex cursor-pointer flex-1 flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
+          className={`relative z-30 flex cursor-pointer grow basis-0 min-w-[200px] flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
           onClick={() => handleButtonClick(key)}
         >
           <span className="whitespace-nowrap text-xs text-muted-foreground">
@@ -186,7 +186,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
             {chartDataKey.length} {t("monitor.monitorCount")}
           </CardDescription>
         </div>
-        <div className="flex flex-wrap">{chartButtons}</div>
+        <div className="flex flex-wrap w-full">{chartButtons}</div>
       </CardHeader>
       <CardContent className="pr-2 pl-0 py-4 sm:pt-6 sm:pb-6 sm:pr-6 sm:pl-2">
         <ChartContainer