Update @vscode/webview-ui-toolkit to 1.4.0 (#1272)

Author: jdneo

package-lock.json

@@ -360,7 +360,7 @@
     "@iconify/react": "^1.1.4",
     "@reduxjs/toolkit": "^1.8.6",
     "@vscode/codicons": "^0.0.35",
-    "@vscode/webview-ui-toolkit": "1.2.2",
+    "@vscode/webview-ui-toolkit": "1.4.0",
     "@xmldom/xmldom": "^0.8.3",
     "axios": "^1.6.0",
     "bootstrap": "^4.6.2",

package.json

@@ -55,13 +55,13 @@ const JdkRuntime = (): JSX.Element => {
       className="setting-section-option"
       key="add-new-jdk"
       value="add-new-jdk"
+      id="add-new-jdk"
       onMouseEnter={() => setOptionDescription("Select a JDK from the file system.")}
       onMouseLeave={() => setOptionDescription(activeVmInstallPath + 'asds')}
       onClick={() => handleSelectJdk("add-new-jdk")}
     >
       <div className="setting-section-option-action">
-        <span className="codicon codicon-folder-opened"></span>
-        Add a new JDK...
+        <span className="codicon codicon-folder-opened"/>Add a new JDK...
       </div>
     </VSCodeOption>
   );

src/classpath/assets/features/classpathConfiguration/components/JdkRuntime.tsx

@@ -52,9 +52,14 @@
   &[open][position='below'] .dropdown-above-description {
     display: none;
   }
+
   &[open][position='above'] .dropdown-below-description {
     display: none;
   }
+
+  &[open][position='above'] #add-new-jdk {
+    margin: calc(var(--design-unit) * 1px) 0;
+  }
 
   p {
     word-break: break-all;
@@ -65,8 +70,11 @@
   .setting-section-option {
     padding: 0 4px;
     .setting-section-option-action {
-    display: flex;
-    align-items: flex-end;
+      display: flex;
+      align-items: flex-end;
+      .codicon {
+        margin-right: calc(var(--design-unit) * 1px);
+      }
     }
   }
 }