fix: inline card server name overflow

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+dev-dist
 *.local
 
 # Editor directories and files

src/components/ReloadPrompt.tsx

@@ -1,6 +1,6 @@
-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();
@@ -10,13 +10,15 @@ function ReloadPrompt() {
     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})`, 
-    {
+  toast.message(`${t("pwa.newContent")} (${import.meta.env.VITE_GIT_HASH})`, {
     action: {
-        label: t('pwa.reload'),
+      label: t("pwa.reload"),
       onClick: () => update(),
     },
     onDismiss: close,
     duration: Infinity,
-    }
-  );
+  });
 
   return null;
 }

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",
             )}
           >

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;
 }

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: {