From 6addf52de2ab819afb76e20a11e2e46919ea62b6 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 8 Nov 2023 09:34:16 +0300
Subject: [PATCH] fix: fix ui styling of the topology metric bar

---
 src/components/TopologyCard/CardMetrics.tsx | 2 +-
 src/components/TopologyCard/index.tsx       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TopologyCard/CardMetrics.tsx b/src/components/TopologyCard/CardMetrics.tsx
index 6679ce995f..80a8cced77 100644
--- a/src/components/TopologyCard/CardMetrics.tsx
+++ b/src/components/TopologyCard/CardMetrics.tsx
@@ -34,7 +34,7 @@ export const CardMetrics = ({
             "flex-row items-center justify-center": row
           })}
         >
-          <h6 className={`space-x-2 ${labelClasses}`}>
+          <h6 className={`space-x-2 whitespace-nowrap  ${labelClasses}`}>
             {showLabelIcons && (
               <Icon name={item.icon} className="w-5" secondary={item.name} />
             )}
diff --git a/src/components/TopologyCard/index.tsx b/src/components/TopologyCard/index.tsx
index f77434eda7..0169443254 100644
--- a/src/components/TopologyCard/index.tsx
+++ b/src/components/TopologyCard/index.tsx
@@ -142,7 +142,7 @@ export function TopologyCard({
       {...selectionModeRootProps}
     >
       <div className="flex flex-row -mt-1 bg-white border-b flex-nowrap rounded-t-md">
-        <div className="flex gap-2 pr-1 pt-2.5 pb-3.5 pl-2 overflow-hidden">
+        <div className="flex flex-1 gap-2 pr-1 pt-2.5 pb-3.5 pl-2 overflow-hidden">
           <div className="text-gray-color m-auto mr-1.5 flex-initial max-w-1/4 leading-1.21rel">
             <h3 className="text-gray-color text-2xsi leading-1.21rel">
               <Icon name={topology.icon} className="h-6" />
@@ -150,7 +150,7 @@ export function TopologyCard({
           </div>
           <div className="flex flex-col flex-1 m-auto overflow-hidden">
             <div
-              className="font-bold overflow-hidden truncate align-middle text-15pxinrem leading-1.21rel"
+              className="font-bold overflow-hidden truncate text-ellipsis align-middle text-15pxinrem leading-1.21rel"
               title={topology.name}
             >
               {prepareTopologyLink(topology) && (