From 5c78a1f00a4110ed864b3ce31a4fa02cb7f933c5 Mon Sep 17 00:00:00 2001
From: lukylix <dev.garcia.lucas@gmail.com>
Date: Sat, 8 Jul 2023 15:30:09 +0200
Subject: [PATCH] Fix columns number && elipsis

---
 src/components/services/item.jsx | 74 ++++++++++++++++++--------------
 src/components/services/list.jsx | 14 +++---
 2 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index a0f282c1..de74db27 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -14,7 +14,7 @@ import ResolvedIcon from "components/resolvedicon";
 export default function Item({ service, group }) {
   const hasLink = service.href && service.href !== "#";
   const { settings } = useContext(SettingsContext);
-  const showStats = (service.showStats === false) ? false : settings.showStats;
+  const showStats = service.showStats === false ? false : settings.showStats;
   const [statsOpen, setStatsOpen] = useState(service.showStats);
   const [statsClosing, setStatsClosing] = useState(false);
 
@@ -58,16 +58,16 @@ export default function Item({ service, group }) {
               href={service.href}
               target={service.target ?? settings.target ?? "_blank"}
               rel="noreferrer"
-              className="flex-1 flex items-center justify-between rounded-r-md "
+              className="flex-1 flex items-center justify-between rounded-r-md w-full overflow-hidden"
             >
-              <div className="flex-1 px-2 py-2 text-sm text-left">
+              <div className="flex-1 px-2 py-2 text-sm text-left text-ellipsis whitespace-nowrap overflow-hidden ...">
                 {service.name}
                 <p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
               </div>
             </a>
           ) : (
-            <div className="flex-1 flex items-center justify-between rounded-r-md ">
-              <div className="flex-1 px-2 py-2 text-sm text-left">
+            <div className="flex-1 flex items-center justify-between rounded-r-md w-full overflow-hidden">
+              <div className="flex-1 px-2 py-2 text-sm text-left text-ellipsis whitespace-nowrap overflow-hidden ...">
                 {service.name}
                 <p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
               </div>
@@ -75,33 +75,33 @@ export default function Item({ service, group }) {
           )}
 
           <div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2">
-              {service.ping && (
-                <div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
-                  <Ping group={group} service={service.name} />
-                  <span className="sr-only">Ping status</span>
-                </div>
-              )}
+            {service.ping && (
+              <div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
+                <Ping group={group} service={service.name} />
+                <span className="sr-only">Ping status</span>
+              </div>
+            )}
 
-              {service.container && (
-                <button
-                  type="button"
-                  onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
-                  className="flex-shrink-0 flex items-center justify-center cursor-pointer"
-                >
-                  <Status service={service} />
-                  <span className="sr-only">View container stats</span>
-                </button>
-              )}
-              {(service.app && !service.external) && (
-                <button
-                  type="button"
-                  onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
-                  className="flex-shrink-0 flex items-center justify-center cursor-pointer"
-                >
-                  <KubernetesStatus service={service} />
-                  <span className="sr-only">View container stats</span>
-                </button>
-              )}
+            {service.container && (
+              <button
+                type="button"
+                onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
+                className="flex-shrink-0 flex items-center justify-center cursor-pointer"
+              >
+                <Status service={service} />
+                <span className="sr-only">View container stats</span>
+              </button>
+            )}
+            {service.app && !service.external && (
+              <button
+                type="button"
+                onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
+                className="flex-shrink-0 flex items-center justify-center cursor-pointer"
+              >
+                <KubernetesStatus service={service} />
+                <span className="sr-only">View container stats</span>
+              </button>
+            )}
           </div>
         </div>
 
@@ -112,7 +112,9 @@ export default function Item({ service, group }) {
               "w-full overflow-hidden transition-all duration-300 ease-in-out"
             )}
           >
-            {(showStats || statsOpen) && <Docker service={{ widget: { container: service.container, server: service.server } }} />}
+            {(showStats || statsOpen) && (
+              <Docker service={{ widget: { container: service.container, server: service.server } }} />
+            )}
           </div>
         )}
         {service.app && (
@@ -122,7 +124,13 @@ export default function Item({ service, group }) {
               "w-full overflow-hidden transition-all duration-300 ease-in-out"
             )}
           >
-            {(showStats || statsOpen) && <Kubernetes service={{ widget: { namespace: service.namespace, app: service.app, podSelector: service.podSelector } }} />}
+            {(showStats || statsOpen) && (
+              <Kubernetes
+                service={{
+                  widget: { namespace: service.namespace, app: service.app, podSelector: service.podSelector },
+                }}
+              />
+            )}
           </div>
         )}
 
diff --git a/src/components/services/list.jsx b/src/components/services/list.jsx
index 7719a3d1..57d9c2ef 100644
--- a/src/components/services/list.jsx
+++ b/src/components/services/list.jsx
@@ -17,13 +17,13 @@ const columnMap = [
 const subcolumnMap = [
   "grid-cols-1",
   "grid-cols-1",
-  "grid-cols-[repeat(auto-fit,minmax(11rem,1fr))]",
-  "grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]",
-  "grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
-  "grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
-  "grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
-  "grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
-  "grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
+  "grid-cols-1 @[11rem]:grid-cols-2",
+  "grid-cols-1 @[9rem]:grid-cols-2 @[18rem]:grid-cols-3",
+  "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4",
+  "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5",
+  "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5 @[35rem]:grid-cols-6",
+  "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5 @[35rem]:grid-cols-6 @[42rem]:grid-cols-7",
+  "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5 @[35rem]:grid-cols-6 @[42rem]:grid-cols-7 @[49rem]:grid-cols-8",
 ];
 
 export default function List({ group, services, layout, isGroup = false }) {