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,20 +103,18 @@ export class ClustersMenu extends React.Component<Props> {
             </p>
           </div>
         )}
-        <div className="clusters flex column gaps">
-          {clusters.map(cluster => {
-            return (
-              <ClusterIcon
-                key={cluster.id}
-                showErrors={true}
-                cluster={cluster}
-                isActive={cluster.id === clusterStore.activeClusterId}
-                onClick={() => this.showCluster(cluster.id)}
-                onContextMenu={() => this.showContextMenu(cluster)}
-              />
-            )
-          })}
-        </div>
+        {clusters.map(cluster => {
+          return (
+            <ClusterIcon
+              key={cluster.id}
+              showErrors={true}
+              cluster={cluster}
+              isActive={cluster.id === clusterStore.activeClusterId}
+              onClick={() => this.showCluster(cluster.id)}
+              onContextMenu={() => this.showContextMenu(cluster)}
+            />
+          )
+        })}
         <div className="add-cluster" onClick={this.addCluster}>
           <Tooltip targetId="add-cluster-icon">
             <Trans>Add Cluster</Trans>