fix: chart button

app/(main)/ClientComponents/NetworkChart.tsx

@@ -128,7 +128,7 @@ export const NetworkChart = 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">
@@ -180,7 +180,7 @@ export const NetworkChart = React.memo(function NetworkChart({
             {chartDataKey.length} {t("ServerMonitorCount")}
           </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

app/(main)/page.tsx

@@ -5,6 +5,8 @@ import { Suspense } from "react";
 import ServerGlobal from "./ClientComponents/Global";
 import GlobalLoading from "./ClientComponents/GlobalLoading";
 
+export const runtime = "edge";
+
 export default async function Home({
   searchParams,
 }: {

app/not-found.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import Footer from "./(main)/footer";
 import Header from "./(main)/header";
 
+export const runtime = "edge";
+
 export default function NotFoundPage() {
   const t = useTranslations("NotFoundPage");
   return (