Fix CSS issues add relationship modal [SCI-9955] (#6897)

app/assets/stylesheets/repositories.scss

@@ -513,3 +513,22 @@
     }
   }
 }
+
+#repositoryItemRelationshipsModal {
+  .item-options {
+    max-height: 23rem;
+
+    .option-label {
+      -webkit-line-clamp: 1;
+    }
+  }
+
+  .inventory-options {
+    left: 0 !important;
+    max-height: 28rem;
+
+    .option-label {
+      cursor: pointer;
+    }
+  }
+}

app/javascript/vue/item_relationships/RepositoryItemRelationshipsModal.vue

@@ -23,7 +23,7 @@
           </div>
 
           <!-- header subtitle -->
-          <div class="h-10 overflow-hidden break-words text-sn-dark-grey text-sm font-normal leading-5"
+          <div class="h-10 overflow-hidden break-words text-sn-dark-grey text-sm font-normal leading-5 self-start"
             style="-webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box;">
             {{ i18n.t('repositories.item_card.repository_item_relationships_modal.header_subtitle') }}
           </div>
@@ -41,6 +41,7 @@
                 :isLoading="isLoadingInventories"
                 :lazyLoadEnabled="true"
                 :optionsUrl="inventoriesUrl"
+                optionsClassName="inventory-options"
                 :placeholder="i18n.t('repositories.item_card.repository_item_relationships_modal.select_inventory_placeholder')"
                 :noOptionsPlaceholder="i18n.t('repositories.item_card.repository_item_relationships_modal.select_inventory_no_options_placeholder')"
                 :searchPlaceholder="i18n.t('repositories.item_card.repository_item_relationships_modal.select_inventory_placeholder')"
@@ -61,7 +62,7 @@
                 :lazyLoadEnabled="true"
                 :withButtons="false"
                 :withEditCursor="false"
-                optionsClassName="max-h-[300px]"
+                optionsClassName="item-options"
                 :optionsUrl="inventoryItemsUrl"
                 :options="itemOptions"
                 :placeholder="i18n.t('repositories.item_card.repository_item_relationships_modal.select_item_placeholder')"

app/javascript/vue/shared/checklist_search.vue

@@ -105,7 +105,7 @@ export default {
       if (this.selectedValues.length === 1) {
         return this.currentOptions.find(({ id }) => id === this.selectedValues[0])?.label;
       }
-      return `${this.selectedValues.length} ${this.i18n.t('general.selected')}`;
+      return `${this.selectedValues.length} ${this.i18n.t('general.options_selected')}`;
     },
     optionsUrlValue() {
       if (!this.optionsUrl) return '';

app/javascript/vue/shared/checklist_select.vue

@@ -56,7 +56,11 @@
               <input v-model="selectedValues" :value="option.id" :id="option.id" type="checkbox" class="sci-checkbox project-card-selector">
               <label :for="option.id" class="sci-checkbox-label"></label>
             </div>
-            <span :title="option.label" class="text-ellipsis overflow-hidden max-h-[4rem] ml-1 whitespace-normal line-clamp-3">{{ option.label }}</span>
+            <span :title="option.label"
+              class="text-ellipsis overflow-hidden max-h-[4rem] ml-1 whitespace-normal line-clamp-3 option-label"
+            >
+              {{ option.label }}
+            </span>
           </div>
         </div>
         <template v-else>

app/javascript/vue/shared/select.vue

@@ -6,7 +6,9 @@
       </button>
       <i class="sn-icon" :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen}"></i>
     </slot>
-    <div :style="optionPositionStyle" class="py-2.5 bg-white z-10 shadow-sn-menu-sm" :class="{ 'hidden': !isOpen }">
+    <div :style="optionPositionStyle" class="py-2.5 bg-white z-10 shadow-sn-menu-sm rounded"
+      :class="{ 'hidden': !isOpen }"
+    >
       <div v-if="withClearButton" class="px-2 pb-2.5">
         <div @mousedown.prevent.stop="setValue(null)"
              class="btn btn-light !text-xs pl-3 active:bg-sn-super-light-blue"
@@ -27,7 +29,7 @@
             v-for="option in options"
             :key="option[0]"
             @mousedown.prevent.stop="setValue(option[0])"
-            class="sn-select__option p-3 rounded shadow-none"
+            class="sn-select__option p-3 rounded shadow-none option-label"
             :title="option[1]"
             :class="{
               'select__option-placeholder': option[2],

config/locales/en.yml

@@ -2228,7 +2228,7 @@ en:
       add_relationship_button_text: "Add"
       repository_item_relationships_modal:
         header_title: "Add relationship"
-        header_subtitle: "Select the fields below to create the desired relationship"
+        header_subtitle: "Select the fields below to add new relationship."
         add_button: "Add"
         cancel_button: "Cancel"
         select_inventory_placeholder: "Select inventory name"
@@ -3802,6 +3802,7 @@ en:
     selected: "Selected"
     loading: "Loading..."
     replace: "Replace"
+    options_selected: 'options selected'
     # In order to use the strings 'yes' and 'no' as keys, you need to wrap them with quotes
     'yes': "Yes"
     'no': "No"