Merge branch 'main' into cloudflare

app/(main)/layout.tsx

@@ -13,7 +13,7 @@ export default async function MainLayout({ children }: DashboardProps) {
 
   return (
     <div className="flex min-h-screen w-full flex-col">
-      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:p-10 md:pt-8">
+      <main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-background p-4 md:p-10 md:pt-8">
         <Header />
         {!session && getEnv("SitePassword") ? <SignIn /> : children}
         <Footer />

components/LanguageSwitcher.tsx

@@ -23,7 +23,11 @@ export function LanguageSwitcher() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="rounded-full px-[9px]">
+        <Button
+          variant="outline"
+          size="sm"
+          className="rounded-full px-[9px] bg-white dark:bg-black"
+        >
           {localeItems.find((item) => item.code === locale)?.name}
           <span className="sr-only">Change language</span>
         </Button>

components/ServerCard.tsx

@@ -14,6 +14,7 @@ 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,
@@ -26,9 +27,19 @@ export default function ServerCard({
     formatNezhaInfo(serverInfo);
 
   const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
-
   const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
 
+  const nameRef = useRef<HTMLParagraphElement | null>(null);
+  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
@@ -55,6 +66,7 @@ export default function ServerCard({
               <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",
                       showFlag ? "text-[11px]" : "text-sm",
@@ -62,7 +74,9 @@ export default function ServerCard({
                   >
                     {name}
                   </p>
-                  <div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
+                  {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>
@@ -169,7 +183,9 @@ export default function ServerCard({
                 >
                   {name}
                 </p>
-                <div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
+                {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>

components/ThemeSwitcher.tsx

@@ -18,7 +18,11 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="rounded-full px-[9px]">
+        <Button
+          variant="outline"
+          size="sm"
+          className="rounded-full px-[9px] bg-white dark:bg-black"
+        >
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nezha-dash",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3020",

styles/globals.css

@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 0 0% 98%;
     --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
     --card-foreground: 20 14.3% 4.1%;
@@ -37,7 +37,7 @@
   }
 
   .dark {
-    --background: 20 14.3% 4.1%;
+    --background: 30 15% 8%;
     --foreground: 60 9.1% 97.8%;
     --card: 20 14.3% 4.1%;
     --card-foreground: 60 9.1% 97.8%;