From 32da095cdde0363da74df2461d571ace7be82617 Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Mon, 20 Nov 2023 09:04:05 -0700
Subject: [PATCH 1/2] style: match multiselect scope styling to figma

---
 src/components/ViewSpecRegistrationModal.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ViewSpecRegistrationModal.vue b/src/components/ViewSpecRegistrationModal.vue
index 1aedb706..59e34f02 100644
--- a/src/components/ViewSpecRegistrationModal.vue
+++ b/src/components/ViewSpecRegistrationModal.vue
@@ -65,6 +65,7 @@
                   data-testid="available-scopes-select"
                   class="available-scopes-select"
                   :items="mappedAvailableScopes"
+                  width="100%"
                   @change="handleChangedItem"
                 />
               </div>
@@ -385,6 +386,7 @@ export default defineComponent({
 
  .table-text {
   text-align: left;
+  font-weight: 600;
  }
 
  .application-registration-modal {
@@ -397,7 +399,7 @@ export default defineComponent({
 
     .k-input-label {
       color: var(--section_colors-body);
-      font-weight: 400;
+      font-weight: 600;
       width: 100%;
     }
   }
@@ -413,8 +415,11 @@ export default defineComponent({
 
   .name-container {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
+
+    .available-scopes-select {
+      margin-top: 14px;
+    }
   }
 
 </style>

From dd18f16a836482ae19a67774ebbb3dc78c6f04bd Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Mon, 20 Nov 2023 09:07:52 -0700
Subject: [PATCH 2/2] chore: show selected items

---
 src/components/ViewSpecRegistrationModal.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ViewSpecRegistrationModal.vue b/src/components/ViewSpecRegistrationModal.vue
index 59e34f02..d0dcebaf 100644
--- a/src/components/ViewSpecRegistrationModal.vue
+++ b/src/components/ViewSpecRegistrationModal.vue
@@ -62,9 +62,11 @@
                   v-if="availableScopes.length"
                   v-model="selectedScopes"
                   :label="helpText.applicationRegistration.availableScopesLabel"
+                  collapsed-context
                   data-testid="available-scopes-select"
                   class="available-scopes-select"
                   :items="mappedAvailableScopes"
+                  :placeholder="helpText.applicationRegistration.availableScopesLabel"
                   width="100%"
                   @change="handleChangedItem"
                 />