Fixing cluster icon badge overflow (#749)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -30,7 +30,7 @@
     position: absolute;
     right: 0;
     bottom: 0;
-    margin: -$padding * 1.5;
+    margin: -$padding;
     font-size: $font-size-small;
     background: $colorError;
     color: white;

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

@@ -3,9 +3,9 @@
 
   position: relative;
   text-align: center;
-  padding: $spacing;
   background: $clusterMenuBackground;
   border-right: 1px solid $clusterMenuBorderColor;
+  padding-bottom: $spacing;
 
   .is-mac & {
     padding-top: $spacing * 2;
@@ -49,11 +49,11 @@
 
   .clusters {
     @include hidden-scrollbar;
+    padding: 0 $spacing $spacing;
   }
 
   > .add-cluster {
     position: relative;
-    margin-top: $padding;
     min-width: 43px;
 
     .Icon {

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

@@ -97,7 +97,7 @@ export class ClustersMenu extends React.Component<Props> {
     const showStartupHint = this.showHint && isLanding && noClustersInScope;
     return (
       <div
-        className={cssNames("ClustersMenu flex column gaps", className)}
+        className={cssNames("ClustersMenu flex column", className)}
         onMouseEnter={() => this.showHint = false}
       >
         {showStartupHint && (