From 560bcea0b8d766d3a261ea717530d3b7e144e4b4 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Fri, 6 Dec 2024 09:49:02 +0800
Subject: [PATCH] fix: inline card server name overflow

---
 .gitignore                          |  1 +
 src/components/ReloadPrompt.tsx     | 37 +++++++++++++----------------
 src/components/ServerCardInline.tsx |  4 ++--
 src/vite-env.d.ts                   | 29 ++++++++++++----------
 vite.config.ts                      | 30 +++++++++++------------
 5 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/.gitignore b/.gitignore
index a547bf3..6d6ae5a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+dev-dist
 *.local
 
 # Editor directories and files
diff --git a/src/components/ReloadPrompt.tsx b/src/components/ReloadPrompt.tsx
index 19f4b13..e20371c 100644
--- a/src/components/ReloadPrompt.tsx
+++ b/src/components/ReloadPrompt.tsx
@@ -1,22 +1,24 @@
-import { useRegisterSW } from 'virtual:pwa-register/react';
-import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
+import { useRegisterSW } from "virtual:pwa-register/react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 function ReloadPrompt() {
   const { t } = useTranslation();
-  
+
   const {
     needRefresh: [needRefresh, setNeedRefresh],
     updateServiceWorker,
   } = useRegisterSW({
     onRegisteredSW(swUrl) {
-      console.log(`SW Registered: ${swUrl} (Version: ${import.meta.env.VITE_GIT_HASH})`);
+      console.log(
+        `SW Registered: ${swUrl} (Version: ${import.meta.env.VITE_GIT_HASH})`,
+      );
     },
     onRegisterError(error) {
-      console.log('SW registration error', error);
+      console.log("SW registration error", error);
     },
     onOfflineReady() {
-      toast.success(t('pwa.offlineReady'));
+      toast.success(t("pwa.offlineReady"));
     },
   });
 
@@ -32,19 +34,14 @@ function ReloadPrompt() {
     return null;
   }
 
-  
-
-  toast.message(
-    `${t('pwa.newContent')} (${import.meta.env.VITE_GIT_HASH})`, 
-    {
-      action: {
-        label: t('pwa.reload'),
-        onClick: () => update(),
-      },
-      onDismiss: close,
-      duration: Infinity,
-    }
-  );
+  toast.message(`${t("pwa.newContent")} (${import.meta.env.VITE_GIT_HASH})`, {
+    action: {
+      label: t("pwa.reload"),
+      onClick: () => update(),
+    },
+    onDismiss: close,
+    duration: Infinity,
+  });
 
   return null;
 }
diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx
index db03c50..f500b57 100644
--- a/src/components/ServerCardInline.tsx
+++ b/src/components/ServerCardInline.tsx
@@ -82,7 +82,7 @@ export default function ServerCardInline({
           >
             {showFlag ? <ServerFlag country_code={country_code} /> : null}
           </div>
-          <div className="relative flex flex-col">
+          <div className="relative w-24 flex flex-col">
             <p
               className={cn(
                 "break-all font-bold tracking-tight",
@@ -226,7 +226,7 @@ export default function ServerCardInline({
         <div className="relative">
           <p
             className={cn(
-              "break-all font-bold tracking-tight",
+              "break-all font-bold w-24 tracking-tight",
               showFlag ? "text-xs" : "text-sm",
             )}
           >
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 71175a7..bdae67f 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,22 +1,27 @@
 /// <reference types="vite/client" />
 
-declare module 'virtual:pwa-register/react' {
-  import type { Dispatch, SetStateAction } from 'react'
+declare module "virtual:pwa-register/react" {
+  import type { Dispatch, SetStateAction } from "react";
 
   export interface RegisterSWOptions {
-    immediate?: boolean
-    onNeedRefresh?: () => void
-    onOfflineReady?: () => void
-    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void
-    onRegisteredSW?: (swScriptUrl: string, registration: ServiceWorkerRegistration | undefined) => void
-    onRegisterError?: (error) => void
+    immediate?: boolean;
+    onNeedRefresh?: () => void;
+    onOfflineReady?: () => void;
+    onRegistered?: (
+      registration: ServiceWorkerRegistration | undefined,
+    ) => void;
+    onRegisteredSW?: (
+      swScriptUrl: string,
+      registration: ServiceWorkerRegistration | undefined,
+    ) => void;
+    onRegisterError?: (error) => void;
   }
 
   export interface RegisterSWHook {
-    needRefresh: [boolean, Dispatch<SetStateAction<boolean>>]
-    offlineReady: [boolean, Dispatch<SetStateAction<boolean>>]
-    updateServiceWorker: (reloadPage?: boolean) => Promise<void>
+    needRefresh: [boolean, Dispatch<SetStateAction<boolean>>];
+    offlineReady: [boolean, Dispatch<SetStateAction<boolean>>];
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>;
   }
 
-  export function useRegisterSW(options?: RegisterSWOptions): RegisterSWHook
+  export function useRegisterSW(options?: RegisterSWOptions): RegisterSWHook;
 }
diff --git a/vite.config.ts b/vite.config.ts
index f32b571..7b608b1 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -57,38 +57,38 @@ export default defineConfig({
         runtimeCaching: [
           {
             urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
-            handler: 'CacheFirst',
+            handler: "CacheFirst",
             options: {
-              cacheName: 'google-fonts-cache',
+              cacheName: "google-fonts-cache",
               expiration: {
                 maxEntries: 10,
-                maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
+                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
               },
               cacheableResponse: {
-                statuses: [0, 200]
-              }
-            }
+                statuses: [0, 200],
+              },
+            },
           },
           {
             urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
-            handler: 'CacheFirst',
+            handler: "CacheFirst",
             options: {
-              cacheName: 'gstatic-fonts-cache',
+              cacheName: "gstatic-fonts-cache",
               expiration: {
                 maxEntries: 10,
-                maxAgeSeconds: 60 * 60 * 24 * 365 // <== 365 days
+                maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
               },
               cacheableResponse: {
-                statuses: [0, 200]
-              }
-            }
+                statuses: [0, 200],
+              },
+            },
           },
-        ]
+        ],
       },
       devOptions: {
         enabled: true,
-        type: 'module'
-      }
+        type: "module",
+      },
     }),
   ],
   resolve: {