Fixing cluster dropdown focus state (#4377)

src/renderer/components/layout/sidebar-cluster.module.css

@@ -25,14 +25,21 @@
   padding: 1.25rem;
   cursor: pointer;
 
-  &:focus-visible {
-    background: var(--blue);
-    color: white;
-  }
-
   &:hover {
     background: var(--sidebarLogoBackground);
   }
+
+  &:focus-visible {
+    .dropdown {
+      box-shadow: 0 0 0 2px var(--focus-color);
+      color: white;
+    }
+  }
+
+  .dropdown {
+    border-radius: 3px;
+    margin-left: var(--margin);
+  }
 }
 
 .clusterName {
@@ -47,8 +54,9 @@
 }
 
 .menu {
-  width: 185px;
-  margin-top: -10px;
+  width: 200px;
+  margin-top: -1.25rem;
+  margin-left: 1.25rem;
 }
 
 .avatar {

src/renderer/components/layout/sidebar-cluster.tsx

@@ -116,7 +116,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
       <div className={styles.clusterName}>
         {metadata.name}
       </div>
-      <Icon material="arrow_drop_down"/>
+      <Icon material="arrow_drop_down" className={styles.dropdown}/>
       <Menu
         usePortal
         htmlFor={id}