From 24f1a07910f7da9ad73f692aa613dbb708536729 Mon Sep 17 00:00:00 2001
From: leon-up9 <97597983+leon-up9@users.noreply.github.com>
Date: Thu, 10 Feb 2022 10:42:48 +0200
Subject: [PATCH] trim (#775)

Co-authored-by: Leon <>
Co-authored-by: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>
Co-authored-by: Igor Gov <iggvrv@gmail.com>
---
 ui/src/components/UI/StatusBar.tsx        | 5 ++++-
 ui/src/components/UI/style/StatusBar.sass | 7 +++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/UI/StatusBar.tsx b/ui/src/components/UI/StatusBar.tsx
index 4c1fa5fd2..092f565c4 100644
--- a/ui/src/components/UI/StatusBar.tsx
+++ b/ui/src/components/UI/StatusBar.tsx
@@ -19,7 +19,10 @@ export const StatusBar = () => {
     return <div className={'statusBar' + (expandedBar ? ' expandedStatusBar' : "")} onMouseOver={() => setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}>
         <div className="podsCount">
             {tappingStatus.some(pod => !pod.isTapped) && <img src={warningIcon} alt="warning"/>}
-            {`Tapping ${amountOfUntappedPods > 0 ? amountOfTappedPods + " / " + amountOfPods : amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}</div>
+            <span className='pods-count-text'>
+                {`Tapping ${amountOfUntappedPods > 0 ? amountOfTappedPods + " / " + amountOfPods : amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}
+            </span>
+        </div>
         {expandedBar && <div style={{marginTop: 20}}>
             <table>
                 <thead>
diff --git a/ui/src/components/UI/style/StatusBar.sass b/ui/src/components/UI/style/StatusBar.sass
index 043a8b2e7..1c4965c47 100644
--- a/ui/src/components/UI/style/StatusBar.sass
+++ b/ui/src/components/UI/style/StatusBar.sass
@@ -17,12 +17,19 @@
     width: auto
     max-height: 32px
     overflow: hidden
+    max-width: clamp(150px,50%,600px)
 
     .podsCount
         display: flex
         justify-content: center
         font-weight: 600
 
+        .pods-count-text
+            width: 100%
+            max-width: 100%
+            white-space: nowrap
+            overflow: hidden
+            text-overflow: ellipsis
         img
             margin-right: 10px
             height: 22px