Widen user search dropdown to fill width, and edit its text hint

The updated dropdown hint is longer than before, so it doesn't fully display. The dropdown was therefore widened so that it shows the entire hint, filling the whitespace between it and the "Add" button.
bcgov · Oct 31, 2023 · fb0e269 · fb0e269
1 parent 966c6de
commit fb0e269
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/frontend/src/assets/primevue.scss b/frontend/src/assets/primevue.scss
@@ -74,6 +74,10 @@
   }
 }
 
+.p-dropdown.usersearch {
+  width: 100% !important
+}
+
 .p-checkbox,
 .p-radiobutton {
   &.p-checkbox-checked,

diff --git a/frontend/src/components/form/SearchUsers.vue b/frontend/src/components/form/SearchUsers.vue
@@ -98,7 +98,7 @@ const onReset = () => {
 
 watch(selectedIDP, () => {
   if (selectedIDP.value?.searchable) {
-    userSearchPlaceholder.value = `Enter an existing ${selectedIDP.value?.name} user's name or email address`;
+    userSearchPlaceholder.value = `Enter the full name or email address of an existing ${selectedIDP.value?.name}`;
   } else {
     userSearchPlaceholder.value = `Enter an existing user's ${selectedIDP.value?.name} email address`;
   }
@@ -144,30 +144,34 @@ onMounted(() => {
       />
     </div>
 
-    <Dropdown
-      v-model="userSearchInput"
-      :options="userSearch"
-      :option-label="(option) => getUserDropdownLabel(option)"
-      editable
-      :placeholder="userSearchPlaceholder"
-      class="mt-1 mb-4"
-      :class="invalidSelectedUser ? 'p-invalid' : ''"
-      @input="onInput"
-      @change="onChange"
-    />
-    <Button
-      label="Add"
-      class="mt-1 mb-4 ml-3"
-      icon="pi pi-check"
-      :disabled="!selectedUser"
-      @click="onAdd"
-    />
-    <Button
-      label="Cancel"
-      class="p-button-outlined mt-1 mb-4 ml-3"
-      icon="pi pi-times"
-      @click="onCancel"
-    />
+    <div class="flex">
+      <div class="flex flex-auto">
+        <Dropdown
+          v-model="userSearchInput"
+          :options="userSearch"
+          :option-label="(option) => getUserDropdownLabel(option)"
+          editable
+          :placeholder="userSearchPlaceholder"
+          class="mt-1 mb-4 usersearch"
+          :class="invalidSelectedUser ? 'p-invalid' : ''"
+          @input="onInput"
+          @change="onChange"
+        />
+      </div>
+      <Button
+        label="Add"
+        class="mt-1 mb-4 ml-3"
+        icon="pi pi-check"
+        :disabled="!selectedUser"
+        @click="onAdd"
+      />
+      <Button
+        label="Cancel"
+        class="p-button-outlined mt-1 mb-4 ml-3"
+        icon="pi pi-times"
+        @click="onCancel"
+      />
+    </div>
   </div>
 </template>