Merge branch 'main' into cloudflare

components/ServerCard.tsx

@@ -3,18 +3,11 @@ import ServerFlag from "@/components/ServerFlag";
 import ServerUsageBar from "@/components/ServerUsageBar";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import getEnv from "@/lib/env-entry";
 import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
 
 export default function ServerCard({
   serverInfo,
@@ -28,27 +21,24 @@ export default function ServerCard({
 
   const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
   const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
-
+  const fixedTopServerName =
-  const nameRef = useRef<HTMLParagraphElement | null>(null);
+    getEnv("NEXT_PUBLIC_FixedTopServerName") === "true";
-  const [isNameOverflow, setIsNameOverflow] = useState(false);
-
-  useEffect(() => {
-    if (nameRef.current) {
-      setIsNameOverflow(
-        nameRef.current.scrollWidth > nameRef.current.clientWidth,
-      );
-    }
-  }, [name]);
 
   return online ? (
     <Link href={`/${id}`} prefetch={true}>
       <Card
-        className={
+        className={cn(
-          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer"
+          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer",
-        }
+          {
+            "flex-col": fixedTopServerName,
+            "lg:flex-row": !fixedTopServerName,
+          },
+        )}
       >
         <section
-          className="grid items-center gap-2 lg:w-28"
+          className={cn("grid items-center gap-2", {
+            "lg:w-40": !fixedTopServerName,
+          })}
           style={{ gridTemplateColumns: "auto auto 1fr" }}
         >
           <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
@@ -60,30 +50,16 @@ export default function ServerCard({
           >
             {showFlag ? <ServerFlag country_code={country_code} /> : null}
           </div>
-
-          <TooltipProvider delayDuration={50}>
-            <Tooltip>
-              <TooltipTrigger asChild>
           <div className="relative">
             <p
-                    ref={nameRef}
               className={cn(
-                      "break-all font-bold tracking-tight text-nowrap lg:max-w-[80px] overflow-x-scroll scrollbar-hidden pr-4",
+                "break-all font-bold tracking-tight",
-                      showFlag ? "text-[11px]" : "text-sm",
+                showFlag ? "text-xs" : "text-sm",
               )}
             >
               {name}
             </p>
-                  {isNameOverflow && (
-                    <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"}>
@@ -152,14 +128,20 @@ export default function ServerCard({
   ) : (
     <Card
       className={cn(
-        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row",
+        "flex flex-col items-center justify-start gap-3 p-3 md:px-5",
         showNetTransfer
           ? "lg:min-h-[91px] min-h-[123px]"
           : "lg:min-h-[61px] min-h-[93px]",
+        {
+          "flex-col": fixedTopServerName,
+          "lg:flex-row": !fixedTopServerName,
+        },
       )}
     >
       <section
-        className="grid items-center gap-2 lg:w-28"
+        className={cn("grid items-center gap-2", {
+          "lg:w-40": !fixedTopServerName,
+        })}
         style={{ gridTemplateColumns: "auto auto 1fr" }}
       >
         <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
@@ -171,28 +153,16 @@ 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 text-nowrap overflow-x-scroll scrollbar-hidden pr-4",
+              "break-all font-bold tracking-tight",
               showFlag ? "text-xs max-w-[80px]" : "text-sm",
             )}
           >
             {name}
           </p>
-                {isNameOverflow && (
-                  <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>
     </Card>
   );

package.json

@@ -32,7 +32,7 @@
     "framer-motion": "^12.0.0-alpha.1",
     "lucide-react": "^0.454.0",
     "luxon": "^3.5.0",
-    "next": "^15.0.3-canary.4",
+    "next": "^15.0.3-canary.5",
     "next-auth": "^5.0.0-beta.25",
     "next-intl": "^3.24.0",
     "next-runtime-env": "^3.2.2",