fix: fix ui styling of the topology metric bar

flanksource · Nov 8, 2023 · 6addf52 · 6addf52
1 parent 0ab5db7
commit 6addf52
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git 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
@@ -142,15 +142,15 @@ 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" />
             </h3>
           </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) && (