SY-2953 - Fixed Cluster Dropdown Overflow Style (#1471)

Author: emilbon99

console/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@synnaxlabs/console",
   "private": true,
-  "version": "0.45.2",
+  "version": "0.45.3",
   "type": "module",
   "scripts": {
     "check-types": "tsc --noEmit",

console/src/cluster/Dropdown.css

@@ -9,23 +9,23 @@
  * included in the file licenses/APL.txt.
  */
 
-.console-cluster-dropdown > button {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0;
-    max-width: 175px;
+.console-cluster-dropdown {
+    > button {
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0;
+        max-width: 175px;
 
-    > :nth-child(2) {
-        overflow: hidden;
-        text-overflow: ellipsis;
+        > :nth-child(2) {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 }
 
 .console-cluster-list {
     width: 400px;
-    .pluto-header {
-        background: var(--pluto-gray-l1);
-    }
-    .pluto-list__container {
-        background: var(--pluto-gray-l1);
+    overflow-y: auto;
+    .pluto-list__item {
+        min-height: 10rem;
     }
 }

console/src/cluster/Dropdown.tsx

@@ -64,16 +64,17 @@ const ListItem = ({ validateName, ...rest }: ListItemProps): ReactElement | null
       y
       selected={selected}
       onSelect={onSelect}
+      gap="small"
       {...rest}
     >
       <Text.MaybeEditable
         id={`cluster-dropdown-${item.key}`}
-        weight={450}
+        weight={500}
         value={item.name}
         onChange={handleChange}
         allowDoubleClick={false}
       />
-      <Text.Text color={10}>
+      <Text.Text color={9} weight={450}>
         {item.host}:{item.port}
       </Text.Text>
     </CoreList.Item>
@@ -255,7 +256,12 @@ export const Dropdown = (): ReactElement => {
               Connect
             </Button.Button>
           </Flex.Box>
-          <Flex.Box empty style={{ height: 190 }} onContextMenu={menuProps.open}>
+          <Flex.Box
+            className={CSS.B("cluster-list")}
+            empty
+            style={{ height: 190 }}
+            onContextMenu={menuProps.open}
+          >
             {keys.map((key, i) => (
               <ListItem key={key} index={i} itemKey={key} validateName={validateName} />
             ))}

core/pkg/version/VERSION

@@ -1 +1 @@
-0.45.1
+0.45.2