Include tailwind bg-black/white, greedy ping regex, adjust position

src/components/services/item.jsx

@@ -77,7 +77,7 @@ export default function Item({ service, group }) {
             </div>
           )}
 
-          <div className={`absolute top-0 right-0 flex flex-row justify-end ${statusStyle === 'dot' ? 'gap-0' : 'gap-2'} mr-2 z-30 service-tags`}>
+          <div className={`absolute top-0 right-0 flex flex-row justify-end ${statusStyle === 'dot' ? 'gap-0' : 'gap-2 mr-2'} z-30 service-tags`}>
               {service.ping && (
                 <div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
                   <Ping group={group} service={service.name} style={statusStyle} />

src/components/services/kubernetes-status.jsx

@@ -8,7 +8,7 @@ export default function KubernetesStatus({ service, style }) {
   let statusLabel = t("docker.unknown");
   let statusTitle = "";
   let backgroundClass = "px-1.5 py-0.5 bg-theme-500/10 dark:bg-theme-900/50";
-  let colorClass = "text-black/20 dark:text-white/40 ";
+  let colorClass = "text-black/20 dark:text-white/40 opacity-20";
 
   if (error) {
     statusTitle = t("docker.error");
@@ -29,8 +29,8 @@ export default function KubernetesStatus({ service, style }) {
   }
 
   if (style === 'dot') {
-    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d/, '');
-    backgroundClass = "p-3 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
+    colorClass = colorClass.replace(/text-/g, 'bg-').replace(/\/\d\d/g, '');
+    backgroundClass = "p-4 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
   }
 
   return (

src/components/services/ping.jsx

@@ -7,7 +7,7 @@ export default function Ping({ group, service, style }) {
     refreshInterval: 30000
   });
 
-  let colorClass = "text-black/20 dark:text-white/40";
+  let colorClass = "text-black/20 dark:text-white/40 opacity-20";
   let backgroundClass = "bg-theme-500/10 dark:bg-theme-900/50 px-1.5 py-0.5";
   let statusTitle = t("ping.http_status");
   let statusText = "";
@@ -28,7 +28,7 @@ export default function Ping({ group, service, style }) {
     } else {
       statusText = data.status;
     }
-  } else {
+  } else if (data) {
     const ping = t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", maximumFractionDigits: 0 })
     statusTitle += ` ${data.status} (${ping})`;
     colorClass = "text-emerald-500/80";
@@ -42,8 +42,8 @@ export default function Ping({ group, service, style }) {
   }
 
   if (style === "dot") {
-    backgroundClass = 'p-3';
-    colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d/, '');
+    backgroundClass = 'p-4';
+    colorClass = colorClass.replace(/text-/g, 'bg-').replace(/\/\d\d/g, '');
   }
 
   return (

src/components/services/status.jsx

@@ -46,7 +46,7 @@ export default function Status({ service, style }) {
 
   if (style === 'dot') {
     colorClass = colorClass.replace('text-', 'bg-').replace(/\/\d\d$/, '');
-    backgroundClass = "p-3 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
+    backgroundClass = "p-4 hover:bg-theme-500/10 dark:hover:bg-theme-900/20";
   }
 
   return (

tailwind.config.js

@@ -70,5 +70,8 @@ module.exports = {
     'lg:grid-cols-6',
     'lg:grid-cols-7',
     'lg:grid-cols-8',
+    'bg-white',
+    'bg-black',
+    'dark:bg-white',
   ],
 }