fix the service component style

Signed-off-by: ngn <ngn@ngn.tf>

app/src/components/service.svelte

@@ -13,16 +13,18 @@
     </div>
     <ul>
       <li><a href={service.clear}> Clear</a></li>
+      <span>|</span>
       <li><a href={service.onion}>TOR</a></li>
+      <span>|</span>
       <li><a href={service.i2p}> I2P</a></li>
     </ul>
   </div>
   <div class="check">
-    <h1>
+    <p>
       {$_("services.last", {
         time: time_from_ts(service.check_time),
       })}
-    </h1>
+    </p>
     {#if service.check_res == 0}
       <span style="background: var(--white-2)">
         {$_("services.status.down")}
@@ -48,7 +50,7 @@
     border: solid 1px var(--black-3);
     text-align: left;
 
-    flex-grow: 1;
+    flex: 1;
   }
 
   main .info {
@@ -82,12 +84,6 @@
     list-style: none;
   }
 
-  main .info ul li:not(:last-of-type)::after {
-    content: " / ";
-    color: var(--white-3);
-    font-weight: 900;
-  }
-
   main .info li a {
     color: var(--color);
     text-decoration: none;
@@ -110,6 +106,10 @@
     text-shadow: none;
   }
 
+  main .info ul span {
+    color: var(--white-3);
+  }
+
   main .check {
     border-top: solid 1px var(--black-3);
     display: flex;
@@ -119,12 +119,15 @@
     color: var(--white-1);
   }
 
-  main .check h1 {
+  main .check p {
     font-size: var(--size-2);
     font-weight: 100;
 
     color: var(--white-2);
     padding: 5px 18px;
+
+    word-break: keep-all;
+    white-space: nowrap;
   }
 
   main .check span {

app/src/routes/services/+page.svelte

@@ -59,7 +59,7 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
-    gap: 28px;
     color: var(--white-3);
+    gap: 15px;
   }
 </style>