refactor: server name text no wrap

app/(main)/footer.tsx

@@ -1,7 +1,7 @@
 import pack from "@/package.json";
 import { useTranslations } from "next-intl";
 
-export const experimental_ppr = true
+export const experimental_ppr = true;
 
 export default function Footer() {
   const t = useTranslations("Footer");

app/(main)/header.tsx

@@ -11,7 +11,7 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import React, { useEffect, useRef, useState } from "react";
 
-export const experimental_ppr = true
+export const experimental_ppr = true;
 
 function Header() {
   const t = useTranslations("Header");
@@ -64,7 +64,7 @@ function Header() {
 
 // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
 const useInterval = (callback: () => void, delay: number | null) => {
-  const savedCallback = useRef<() => void>(() => { });
+  const savedCallback = useRef<() => void>(() => {});
   useEffect(() => {
     savedCallback.current = callback;
   });

app/(main)/page.tsx

@@ -1,7 +1,7 @@
 import ServerList from "@/components/ServerList";
 import ServerOverview from "@/components/ServerOverview";
 
-export const experimental_ppr = true
+export const experimental_ppr = true;
 export default function Home() {
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">

components/ServerCard.tsx

@@ -4,10 +4,11 @@ import ServerUsageBar from "@/components/ServerUsageBar";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
 import {
-  Popover,
+  Tooltip,
-  PopoverContent,
+  TooltipContent,
-  PopoverTrigger,
+  TooltipProvider,
-} from "@/components/ui/popover";
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import getEnv from "@/lib/env-entry";
 import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
 import { useTranslations } from "next-intl";
@@ -36,7 +37,7 @@ export default function ServerCard({
         }
       >
         <section
-          className="grid items-center gap-2 lg:w-28 "
+          className="grid items-center gap-2 lg:w-28"
           style={{ gridTemplateColumns: "auto auto 1fr" }}
         >
           <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
@@ -48,14 +49,27 @@ export default function ServerCard({
           >
             {showFlag ? <ServerFlag country_code={country_code} /> : null}
           </div>
+
+          <TooltipProvider delayDuration={50}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="relative">
                   <p
                     className={cn(
-              "break-all font-bold tracking-tight",
+                      "break-all font-bold tracking-tight text-nowrap lg:max-w-[80px] overflow-x-scroll scrollbar-hidden pr-4",
-              showFlag ? "text-xs" : "text-sm",
+                      showFlag ? "text-[11px]" : "text-sm",
                     )}
                   >
                     {name}
                   </p>
+                  <div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs text-muted-foreground">{name}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </section>
         <div className="flex flex-col gap-2">
           <section className={"grid grid-cols-5 items-center gap-3"}>
@@ -130,8 +144,6 @@ export default function ServerCard({
           : "lg:min-h-[61px] min-h-[93px]",
       )}
     >
-      <Popover>
-        <PopoverTrigger asChild>
       <section
         className="grid items-center gap-2 lg:w-28"
         style={{ gridTemplateColumns: "auto auto 1fr" }}
@@ -145,20 +157,27 @@ export default function ServerCard({
         >
           {showFlag ? <ServerFlag country_code={country_code} /> : null}
         </div>
+        <TooltipProvider delayDuration={50}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="relative">
                 <p
                   className={cn(
-                "break-all font-bold tracking-tight",
+                    "break-all font-bold tracking-tight text-nowrap overflow-x-scroll scrollbar-hidden pr-4",
-                showFlag ? "text-xs" : "text-sm",
+                    showFlag ? "text-xs max-w-[80px]" : "text-sm",
                   )}
                 >
                   {name}
                 </p>
+                <div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="text-xs text-muted-foreground">{name}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </section>
-        </PopoverTrigger>
-        <PopoverContent className="w-fit p-2" side="top">
-          <p className="text-sm text-muted-foreground">{t("Offline")}</p>
-        </PopoverContent>
-      </Popover>
     </Card>
   );
 }

components/ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-[10px] border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}

next.config.mjs

@@ -23,7 +23,7 @@ const withPWA = withPWAInit({
 const nextConfig = {
   output: "standalone",
   experimental: {
-    ppr: 'incremental',
+    ppr: "incremental",
   },
   reactStrictMode: true,
   logging: {

package.json

@@ -32,7 +32,7 @@
     "framer-motion": "^12.0.0-alpha.1",
     "lucide-react": "^0.451.0",
     "luxon": "^3.5.0",
-    "next": "^15.0.3-canary.3",
+    "next": "^15.0.3-canary.4",
     "next-auth": "^5.0.0-beta.25",
     "next-intl": "^3.24.0",
     "next-runtime-env": "^3.2.2",
@@ -57,7 +57,7 @@
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "eslint-config-next": "15.0.2",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",