fix: show two columns when no none headline properties

Author: mainawycliffe

src/components/Canary/HealthChecksSummary.tsx

@@ -23,7 +23,7 @@ export function HealthChecksSummary({
 
     const data: StatusLineProps = {
       label: "Health Checks",
-      icon: <AiFillHeart className="mr-1 inline-block h-3.5 w-3.5" />,
+      icon: <AiFillHeart className="inline-block h-4 w-4" />,
       url: "/health",
       statuses: [
         ...(checks.healthy > 0

src/components/StatusLine/StatusLine.tsx

@@ -20,15 +20,21 @@ export type StatusLineData = {
 
 export type StatusLineProps = React.HTMLProps<HTMLDivElement> & StatusLineData;
 
-const renderIcon = (icon: string | React.ReactNode) => {
+interface RenderIconProps {
+  icon: string | React.ReactNode;
+}
+
+const RenderIcon: React.FC<RenderIconProps> = ({ icon }) => {
   if (!icon) {
     return null;
   }
   if (typeof icon === "object") {
-    return icon;
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{icon}</>;
   } else if (typeof icon === "string") {
-    return <Icon name={icon} className="h-4 w-4" />;
+    return <Icon name={icon} className="h-4 w-4 min-w-max" />;
   }
+  return null;
 };
 
 const StatusInfoEntry = ({
@@ -46,14 +52,14 @@ const StatusInfoEntry = ({
         to={statusInfo.url}
         target={target || ""}
       >
-        {statusInfo.icon && renderIcon(statusInfo.icon)}
+        {statusInfo.icon && <RenderIcon icon={statusInfo.icon} />}
         <Chip text={statusInfo.label} color={statusInfo.color} />
       </Link>
     );
   } else {
     return (
       <span className="inline-flex cursor-pointer space-x-1">
-        {statusInfo.icon && renderIcon(statusInfo.icon)}
+        {statusInfo.icon && <RenderIcon icon={statusInfo.icon} />}
         <Chip text={statusInfo.label} color={statusInfo.color} />
       </span>
     );
@@ -74,7 +80,7 @@ export function StatusLine({
       className={clsx("flex flex-row items-center space-x-1", className)}
       {...rest}
     >
-      {icon && renderIcon(icon)}
+      {icon && <RenderIcon icon={icon} />}
       {url && (
         <Link
           title={label}

src/components/Topology/TopologyCard/TopologyCard.tsx

@@ -156,17 +156,26 @@ export function TopologyCard({
     [topology?.components]
   );
 
+  const { heading, properties, hasNoneHeadlineProperties } = useMemo(() => {
+    const allProperties = topology?.properties || [];
+    const properties = allProperties.filter((i) => !i.headline);
+
+    const heading = allProperties.filter(
+      (i) => i.headline && (!!i.value || !!i.text || !!i.url)
+    );
+
+    const hasNoneHeadlineProperties =
+      properties.filter(
+        (i) => !i.headline && i.type !== "hidden" && (i.text || i.value)
+      ).length > 0;
+
+    return { heading, properties, hasNoneHeadlineProperties };
+  }, [topology?.properties]);
+
   if (topology == null) {
     return <TopologyCardSkeletonLoader />;
   }
 
-  const allProperties = topology.properties || [];
-  const properties = allProperties.filter((i) => !i.headline);
-
-  const heading = allProperties.filter(
-    (i) => i.headline && (!!i.value || !!i.text || !!i.url)
-  );
-
   return (
     <div
       style={{ width: CardWidth[size as Size] || size }}
@@ -245,10 +254,14 @@ export function TopologyCard({
           <>
             <TopologyCardPropertiesColumn properties={properties} />
             <CustomScroll
-              className="flex-1 space-y-1.5 py-2 pl-2 pr-2"
+              className={clsx(
+                "flex-1 space-y-1.5 py-2 pl-2 pr-2",
+                !hasNoneHeadlineProperties ? "grid grid-cols-2 gap-1" : ""
+              )}
               showMoreClass="text-xs linear-1.21rel mr-1 cursor-pointer"
               maxHeight="200px"
-              minChildCount={5}
+              // When we showing two columns, we need to show more items
+              minChildCount={hasNoneHeadlineProperties ? 5 : 10}
             >
               <TopologyConfigAnalysisLine topology={topology} />
               {canShowChildHealth() && (

src/ui/CustomScroll/index.tsx

@@ -53,7 +53,7 @@ export const CustomScroll = ({
             setHasScroll(true);
           }}
           className={clsx(
-            "bottom-0 m-auto w-full hover:underline",
+            "bottom-0 col-span-2 m-auto w-full hover:underline",
             showMoreClass
           )}
         >