fix: horizontal metrics

flanksource · Mar 8, 2022 · 473f134 · 473f134
1 parent e246b7d
commit 473f134
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/src/components/Topology/metrics.js b/src/components/Topology/metrics.js
@@ -4,19 +4,17 @@ import clsx from "clsx";
 import { FormatProperty } from "./property";
 
 export const Metrics = ({ items, row }) => (
-  <div
-    className={clsx(
-      "grid rounded-b-8px divide-x flex-1",
-      `grid-cols-${items.length}`
-    )}
-  >
+  <div className="flex rounded-b-8px divide-x flex-1 justify-between items-center">
     {items.map((item) => (
       <div
         key={item.name}
-        className={clsx("text-gray-800 px-2 align-middle text-center flex", {
-          "flex-col": !row,
-          "flex-row items-center justify-center": row
-        })}
+        className={clsx(
+          "text-gray-800 px-2 align-middle text-center flex flex-1",
+          {
+            "flex-col": !row,
+            "flex-row items-center justify-center": row
+          }
+        )}
       >
         <h6 className="text-gray-color text-xs mb-0.5">
           {item.name}

diff --git a/src/components/Topology/topology-card.js b/src/components/Topology/topology-card.js
@@ -119,7 +119,7 @@ export function TopologyCard({
       </div>
       <div className="flex flex-nowrap bg-lightest-gray rounded-b-8px">
         {metricsInFooter ? (
-          <div className="flex p-4 flex-1">
+          <div className="flex py-4 flex-1">
             <Metrics items={heading} />
           </div>
         ) : (