From d7029960217689aa7d2479fb509eb83ec19ee4e1 Mon Sep 17 00:00:00 2001
From: UUBulb <35923940+uubulb@users.noreply.github.com>
Date: Fri, 6 Dec 2024 22:21:50 +0800
Subject: [PATCH] improve styles (#34)

---
 src/components/terminal.tsx |  2 +-
 src/routes/service.tsx      | 22 ++++++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/terminal.tsx b/src/components/terminal.tsx
index eded472..e8a52d6 100644
--- a/src/components/terminal.tsx
+++ b/src/components/terminal.tsx
@@ -150,7 +150,7 @@ export const TerminalPage = () => {
         <div className="px-8">
             <div className="flex mt-6 mb-4">
                 <h1 className="flex-1 text-3xl font-bold tracking-tight">
-                    Terminal
+                    {`Terminal (${id})`}
                 </h1>
                 <div className="flex-2 flex ml-auto gap-2">
                     <FMCard id={id} />
diff --git a/src/routes/service.tsx b/src/routes/service.tsx
index 8b3e84c..7e94d4d 100644
--- a/src/routes/service.tsx
+++ b/src/routes/service.tsx
@@ -33,7 +33,7 @@ export default function ServicePage() {
             toast(t("Error"), {
                 description: t("Results.ErrorFetchingResource", { error: error.message }),
             });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error]);
 
     const columns: ColumnDef<Service>[] = [
@@ -43,7 +43,7 @@ export default function ServicePage() {
                 <Checkbox
                     checked={
                         table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && "indeterminate")
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
                     }
                     onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
                     aria-label="Select all"
@@ -92,12 +92,12 @@ export default function ServicePage() {
                     <div className="max-w-48 whitespace-normal break-words">
                         {(() => {
                             switch (s.cover) {
-                            case 0: {
-                                return <span>{t("CoverAll")}</span>;
-                            }
-                            case 1: {
-                                return <span>{t("IgnoreAll")}</span>;
-                            }
+                                case 0: {
+                                    return <span>{t("CoverAll")}</span>;
+                                }
+                                case 1: {
+                                    return <span>{t("IgnoreAll")}</span>;
+                                }
                             }
                         })()}
                     </div>
@@ -106,8 +106,10 @@ export default function ServicePage() {
         },
         {
             header: t("SpecificServers"),
-            accessorKey: "skipServers",
-            accessorFn: (row) => Object.keys(row.skip_servers ?? {}),
+            cell: ({ row }) => {
+                const s = row.original;
+                return <div className="max-w-32 whitespace-normal break-words">{Object.keys(s.skip_servers ?? {}).join(',')}</div>;
+            }
         },
         {
             header: t("Type"),