fix: cluster-icon's badge (events-count) is cropped in clusters-menu

Signed-off-by: Roman <ixrock@gmail.com>

README.md

@@ -44,7 +44,7 @@ Allows faster separately re-run some of involved processes:
 1. `yarn dev:renderer` compiles electron's renderer part and start watching files  
 1. `yarn dev-run` runs app in dev-mode and restarts when electron's main process file has changed
 
-## Developer's RTFM recommended list:
+## Developer's ~~RTFM~~ recommended list:
 
 - [TypeScript](https://www.typescriptlang.org/docs/home.html) (front-end/back-end) 
 - [ReactJS](https://reactjs.org/docs/getting-started.html) (front-end, ui)

src/renderer/components/+cluster-settings/cluster-icon.scss

@@ -26,5 +26,6 @@
     right: 0;
     bottom: 0;
     margin: -$padding * 1.5;
+    font-size: $font-size-small;
   }
 }

src/renderer/components/+cluster-settings/cluster-icon.tsx

@@ -51,7 +51,7 @@ export class ClusterIcon extends React.Component<Props> {
         {showErrors && isAdmin && eventCount > 0 && (
           <Badge
             className={cssNames("events-count", errorClass)}
-            label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) * 1000 + "+" : eventCount}
+            label={eventCount >= 1000 ? Math.ceil(eventCount / 1000) + "k+" : eventCount}
           />
         )}
         {children}

src/renderer/components/cluster-manager/clusters-menu.scss

@@ -1,4 +1,5 @@
 .ClustersMenu {
+  @include hidden-scrollbar;
   $spacing: $padding * 2;
 
   position: relative;
@@ -38,17 +39,9 @@
     }
   }
 
-  > .clusters {
-    @include hidden-scrollbar;
-    margin-bottom: $spacing !important;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   > .add-cluster {
     position: relative;
+    margin-top: $padding;
 
     .Icon {
       border-radius: $radius;

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -103,7 +103,6 @@ export class ClustersMenu extends React.Component<Props> {
             </p>
           </div>
         )}
-        <div className="clusters flex column gaps">
         {clusters.map(cluster => {
           return (
             <ClusterIcon
@@ -116,7 +115,6 @@ export class ClustersMenu extends React.Component<Props> {
             />
           )
         })}
-        </div>
         <div className="add-cluster" onClick={this.addCluster}>
           <Tooltip targetId="add-cluster-icon">
             <Trans>Add Cluster</Trans>