diff --git a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
index b7fd1c854..d198f3332 100644
--- a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
+++ b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
@@ -18,7 +18,7 @@
@@ -241,7 +241,7 @@ import { filterConfigurationsToValidAndType } from "../../../../src/utils/filter
import { useHostConduitService } from "src/HostConduitService";
import { useHomeStore } from "src/stores/home";
-import QuickPickItem from "src/components/QuickPickItem.vue";
+import QuickPickItem, { IconDetail } from "src/components/QuickPickItem.vue";
import ActionToolbar from "src/components/ActionToolbar.vue";
import DeployButton from "src/components/DeployButton.vue";
import TextStringWithAnchor from "./TextStringWithAnchor.vue";
@@ -343,13 +343,13 @@ const deploymentTitle = computed(() => {
return result.title;
});
-const deploymentSubTitles = computed(() => {
- const subTitles: string[] = [];
- subTitles.push(credentialSubTitle.value);
+const deploymentDetails = computed(() => {
+ const details: IconDetail[] = [];
+ details.push({ icon: "codicon-server", text: credentialSubTitle.value });
if (entrypointSubTitle.value) {
- subTitles.push(entrypointSubTitle.value);
+ details.push({ icon: "codicon-file", text: entrypointSubTitle.value });
}
- return subTitles;
+ return details;
});
const credentialSubTitle = computed(() => {
diff --git a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
index f191d929e..a98c960e1 100644
--- a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
+++ b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue
@@ -12,16 +12,25 @@
-
{{ detail }}
+
+
{{ detail }}
@@ -42,7 +51,7 @@ defineProps<{
.quick-pick-label-container {
.quick-pick-label {
font-weight: 600;
- padding-bottom: 4px;
+ margin-bottom: 4px;
}
}
}
@@ -85,6 +94,14 @@ defineProps<{
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
+
+ &:not(:last-child) {
+ margin-bottom: 2px;
+ }
+
+ .quick-pick-icon {
+ font-size: var(--vscode-font-size);
+ }
}
}
}