Fix multiple css issues on Item card [SCI-9653] (#6608)

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -187,7 +187,7 @@
 
             <!-- NAVIGATION -->
             <div v-if="isShowing" ref="navigationRef" id="navigation"
-              class="flex item-end gap-x-4 min-w-[130px] min-h-[130px] h-fit sticky top-0 right-[24px] ">
+              class="flex item-end gap-x-4 min-w-[130px] min-h-[130px] h-fit sticky top-0 right-[4px] ">
               <scroll-spy :itemsToCreate="[
                 { id: 'highlight-item-1', textId: 'text-item-1', labelAlias: 'information_label', label: 'information-label', sectionId: 'information-section' },
                 { id: 'highlight-item-2', textId: 'text-item-2', labelAlias: 'custom_columns_label', label: 'custom-columns-label', sectionId: 'custom-columns-section' },

app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue

@@ -9,6 +9,7 @@
       <div v-if="dateType === 'date'">
         <div v-if="isEditing || values?.datetime" ref="edit">
           <DateTimePicker
+            :disabled="!canEdit"
             @change="formatDateTime($event)"
             :selectorId="`DatePicker${colId}`"
             :dateOnly="true"
@@ -16,7 +17,7 @@
             :standAlone="true"
           />
         </div>
-        <div v-else ref="view" >
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
           {{ i18n.t(`repositories.item_card.repository_date_value.${canEdit ? 'placeholder' : 'no_date'}`) }}
         </div>
       </div>
@@ -24,6 +25,7 @@
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex align-center">
           <div>
             <DateTimePicker
+              :disabled="!canEdit"
               @change="formatDateTime($event, 'start_time')"
               :selectorId="`DatePickerStart${colId}`"
               :dateOnly="true"
@@ -35,6 +37,7 @@
           <span class="mr-3">-</span>
           <div>
             <DateTimePicker
+              :disabled="!canEdit"
             @change="formatDateTime($event, 'end_time')"
             :selectorId="`DatePickerEnd${colId}`"
             :dateOnly="true"
@@ -44,13 +47,14 @@
             />
           </div>
         </div>
-        <div v-else ref="view" >
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
           {{ i18n.t(`repositories.item_card.repository_date_range_value.${canEdit ? 'placeholder' : 'no_date_range'}`) }}
         </div>
       </div>
       <div v-if="dateType === 'dateTime'">
         <div v-if="isEditing || values?.datetime" ref="edit" class="w-full">
           <DateTimePicker
+            :disabled="!canEdit"
             @change="formatDateTime"
             :selectorId="`DatePicker${colId}`"
             :defaultValue="dateValue(values?.datetime)"
@@ -59,7 +63,7 @@
             timeClassName="w-11"
           />
         </div>
-        <div v-else ref="view" >
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
           {{ i18n.t(`repositories.item_card.repository_date_time_value.${canEdit ? 'placeholder' : 'no_date_time'}`) }}
         </div>
       </div>
@@ -67,6 +71,7 @@
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
           <div>
             <DateTimePicker
+              :disabled="!canEdit"
               @change="formatDateTime($event, 'start_time')"
               :selectorId="`DatePickerStart${colId}`"
               :defaultValue="dateValue(timeFrom?.datetime)"
@@ -80,6 +85,7 @@
           <span class="mx-1">-</span>
           <div>
             <DateTimePicker
+              :disabled="!canEdit"
               @change="formatDateTime($event, 'end_time')"
               :selectorId="`DatePickerEnd${colId}`"
               :defaultValue="dateValue(timeTo?.datetime)"
@@ -91,13 +97,14 @@
             />
           </div>
         </div>
-        <div v-else ref="view" >
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }" >
           {{ i18n.t(`repositories.item_card.repository_date_time_range_value.${canEdit ? 'placeholder' : 'no_date_time_range'}`) }}
         </div>
       </div>
       <div v-else-if="dateType === 'time'">
         <div v-if="isEditing || values?.datetime" ref="edit">
           <DateTimePicker
+            :disabled="!canEdit"
             @change="formatDateTime"
             :selectorId="`DatePicker${colId}`"
             :timeOnly="true"
@@ -106,7 +113,7 @@
             timeClassName="w-11"
           />
         </div>
-        <div v-else ref="view">
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
           {{ i18n.t(`repositories.item_card.repository_time_value.${ canEdit ? 'placeholder' : 'no_time'}`) }}
         </div>
       </div>
@@ -114,6 +121,7 @@
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
           <div>
             <DateTimePicker
+              :disabled="!canEdit"
               @change="formatDateTime($event, 'start_time')"
               :selectorId="`DatePickerStart${colId}`"
               :timeOnly="true"
@@ -125,6 +133,7 @@
           <span class="mx-1">-</span>
           <div>
             <DateTimePicker
+              :disabled="!canEdit"
               @change="formatDateTime($event, 'end_time')"
               :selectorId="`DatePickerEnd${colId}`"
               :timeOnly="true"
@@ -134,7 +143,7 @@
             />
           </div>
         </div>
-        <div v-else ref="view">
+        <div v-else ref="view" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
           {{ i18n.t(`repositories.item_card.repository_time_range_value.${canEdit ? 'placeholder' : 'no_time_range'}`) }}
         </div>
       </div>
@@ -191,7 +200,7 @@
     },
     computed: {
       editableClassName() {
-        const className = 'border-solid border-[1px] p-2 sci-cursor-edit'
+        const className = 'border-solid border-[1px] py-2 px-3 sci-cursor-edit'
         if (this.canEdit && this.errorMessage) return `${className} border-sn-delete-red`;
         if (this.canEdit && this.isEditing) return `${className} border-sn-science-blue`;
         if (this.canEdit) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue

@@ -35,7 +35,8 @@
           </div>
         </div>
       </div>
-      <div v-else-if="!error" class="flex flex-row items-center text-sn-grey font-inter text-sm font-normal leading-5 justify-between">
+      <div v-else-if="!error" class="flex flex-row items-center font-inter text-sm font-normal leading-5 justify-between"
+        :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
         {{ i18n.t(`repositories.item_card.repository_asset_value.${canEdit ? 'placeholder' : 'no_asset'}`) }}
       </div>
     </div>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue

@@ -5,7 +5,7 @@
     </div>
     <div v-if="checklistItems.length > 0">
       <checklist-select
-        v-if="permissions?.can_manage && !inArchivedRepositoryRow"
+        v-if="canEdit"
         @change="changeSelected"
         @update="update"
         :initialSelectedValues="colVal?.map(item => item.value)"
@@ -15,6 +15,8 @@
         :options="checklistItems"
         :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
+        className="h-[38px] !pl-3"
+        optionsClassName="max-h-[300px]"
       ></checklist-select>
       <div v-else
            class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-[370px] overflow-x-auto flex flex-wrap gap-1">
@@ -52,9 +54,8 @@ export default {
     colId: Number,
     colName: String,
     colVal: Array,
-    permissions: null,
     optionsPath: String,
-    inArchivedRepositoryRow: Boolean,
+    canEdit: Boolean
   },
   data() {
     return {

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue

@@ -17,6 +17,8 @@
         :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :searchPlaceholder="i18n.t('repositories.item_card.dropdown_placeholder')"
+        className="h-[38px] !pl-3"
+        optionsClassName="max-h-[300px]"
       ></select-search>
       <div v-else-if="text"
            class="text-sn-dark-grey font-inter text-sm font-normal leading-5"

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryNumberValue.vue

@@ -13,31 +13,32 @@
         }}
       </div>
     </div>
-      <div v-if="canEdit">
-        <text-area :initialValue="(colVal)?.toLocaleString('fullwide', {useGrouping:false}) || ''"
-                   :noContentPlaceholder="noContentPlaceholder"
-                   :placeholder="i18n.t('repositories.item_card.repository_number_value.placeholder')"
-                   :decimals="decimals"
-                   :isNumber="true"
-                   :unEditableRef="`numberRef`"
-                   :expandable="expandable"
-                   :collapsed="collapsed"
-                   @toggleExpandableState="toggleExpandableState"
-                   @update="update" />
-      </div>
-      <div v-else-if="colVal"
-           ref="numberRef"
-           class="text-sn-dark-grey box-content font-inter text-sm font-normal leading-5 min-h-[20px] overflow-y-auto"
-           :class="{
-             'max-h-[4rem]': collapsed,
-             'max-h-[40rem]': !collapsed
-           }">
-        {{ colVal }}
-      </div>
-      <div v-else
-           class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
-        {{ i18n.t("repositories.item_card.repository_number_value.no_number") }}
-      </div>
+    <div v-if="canEdit" class="w-full">
+      <text-area :initialValue="(colVal)?.toLocaleString('fullwide', {useGrouping:false}) || ''"
+                  :noContentPlaceholder="i18n.t('repositories.item_card.repository_number_value.placeholder')"
+                  :placeholder="i18n.t('repositories.item_card.repository_number_value.placeholder')"
+                  :decimals="decimals"
+                  :isNumber="true"
+                  :unEditableRef="`numberRef`"
+                  :expandable="expandable"
+                  :collapsed="collapsed"
+                  @toggleExpandableState="toggleExpandableState"
+                  @update="update"
+                  className="px-3"/>
+    </div>
+    <div v-else-if="colVal"
+          ref="numberRef"
+          class="text-sn-dark-grey box-content font-inter text-sm font-normal leading-5 min-h-[20px] overflow-y-auto"
+          :class="{
+            'max-h-[4rem]': collapsed,
+            'max-h-[40rem]': !collapsed
+          }">
+      {{ colVal }}
+    </div>
+    <div v-else
+          class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
+      {{ i18n.t("repositories.item_card.repository_number_value.no_number") }}
+    </div>
   </div>
 </template>
 
@@ -64,18 +65,12 @@ export default {
     colName: String,
     colVal: Number,
     permissions: null,
-    inArchivedRepositoryRow: Boolean,
+    canEdit: { type: Boolean, defaul: false}
   },
   created() {
     // constants
-    this.noContentPlaceholder = this.i18n.t("repositories.item_card.repository_number_value.no_number");
     this.decimals = Number(document.getElementById(`${this.colId}`).dataset['metadataDecimals']) || 0;
   },
-  computed: {
-    canEdit() {
-      return this.permissions?.can_manage && !this.inArchivedRepositoryRow;
-    }
-  },
   methods: {
     toggleCollapse() {
       if (!this.expandable) return;

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue

@@ -17,6 +17,8 @@
         :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :searchPlaceholder="i18n.t('repositories.item_card.dropdown_placeholder')"
+        className="h-[38px] !pl-3"
+        optionsClassName="max-h-[300px]"
       ></select-search>
       <div v-else-if="status && icon"
            class="flex flex-row items-center text-sn-dark-grey font-inter text-sm font-normal leading-5 gap-1.5">

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStockValue.vue

@@ -18,7 +18,7 @@
       <div v-if="values?.stock_formatted" :data-manage-stock-url="values?.stock_url" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 stock-value">
         {{ values.stock_formatted }}
       </div>
-      <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5 stock-value">
+      <div v-else class="font-inter text-sm font-normal leading-5" :class="{ 'text-sn-dark-grey': !canEdit, 'text-sn-grey': canEdit }">
         {{ i18n.t(`repositories.item_card.repository_stock_value.${canEdit ? 'placeholder' : 'no_stock'}`) }}
       </div>
       <span class="absolute right-2 reminder" :class="{ 'top-1.5': canEdit, 'top-0': !canEdit, hidden: !values?.reminder }">

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTextValue.vue

@@ -16,7 +16,7 @@
 
     <div v-if="canEdit">
       <text-area :initialValue="colVal?.edit"
-                 :noContentPlaceholder="noContentPlaceholder"
+                 :noContentPlaceholder="i18n.t('repositories.item_card.repository_text_value.placeholder')"
                  :placeholder="i18n.t('repositories.item_card.repository_text_value.placeholder')"
                  :unEditableRef="`textRef`"
                  :smartAnnotation="true"
@@ -24,7 +24,8 @@
                  :expandable="expandable"
                  :collapsed="collapsed"
                  @toggleExpandableState="toggleExpandableState"
-                 @update="update" />
+                 @update="update"
+                 className="px-3" />
     </div>
     <div v-else-if="colVal?.edit"
           ref="textRef"
@@ -65,18 +66,12 @@ export default {
     colId: Number,
     colName: String,
     colVal: Object,
-    permissions: null,
-    inArchivedRepositoryRow: Boolean,
+    canEdit: { type: Boolean, default: false }
   },
   created() {
     // constants
     this.noContentPlaceholder = this.i18n.t("repositories.item_card.repository_text_value.no_text");
   },
-  computed: {
-    canEdit() {
-      return this.permissions?.can_manage && !this.inArchivedRepositoryRow;
-    }
-  },
   methods: {
     toggleCollapse() {
       if (!this.expandable) return;

app/javascript/vue/shared/Textarea.vue

@@ -2,23 +2,26 @@
   <textarea v-if="editing"
             ref="textareaRef"
             class="leading-5 inline-block outline-none border-solid font-normal border-[1px] box-content
-                  overflow-x-hidden overflow-y-auto resize-none rounded px-4 py-2 w-[calc(100%-2rem)]
+                  overflow-x-hidden overflow-y-auto resize-none rounded py-2 w-[calc(100%-1.5rem)]
                   border-sn-science-blue"
             :class="{
               'max-h-[4rem]': collapsed,
-              'max-h-[40rem]': !collapsed
+              'max-h-[40rem]': !collapsed,
+              [className]: true
             }"
             :placeholder="placeholder"
             v-model="value"
             @keydown="handleKeydown"
-            @blur="handleBlur" />
+            @blur="handleBlur"></textarea>
   <div v-else
         :ref="unEditableRef"
-        class="grid box-content sci-cursor-edit font-normal border-solid px-4 py-2 border-sn-light-grey rounded
-              leading-5 border outline-none hover:border-sn-sleepy-grey overflow-y-auto whitespace-pre-line
-              w-[calc(100%-2rem)]"
+        class="grid box-content sci-cursor-edit font-normal border-solid py-2 border-sn-light-grey rounded
+              leading-5 border outline-none hover:border-sn-sleepy-grey overflow-y-auto whitespace-pre-line"
         :class="{ 'max-h-[4rem]': collapsed,
-                  'max-h-[40rem]': !collapsed, }"
+                  'max-h-[40rem]': !collapsed,
+                  [className]: true,
+                  'text-sn-dark-grey': value, 'text-sn-grey': !value
+                }"
         @click="enableEdit">
     <span v-if="smartAnnotation"
           v-html="sa_value || noContentPlaceholder"
@@ -47,6 +50,7 @@ export default {
     unEditableRef: { type: String, required: true },
     smartAnnotation: { type: Boolean, default: false },
     sa_value: { type: String },
+    className: { type: String, default: false }
   },
   mounted() {
     this.value = this.initialValue;

app/javascript/vue/shared/checklist_select.vue

@@ -1,35 +1,31 @@
 <template>
-  <div class="w-full relative" ref="container" v-click-outside="{ handler: 'close', exclude: [] }">
+  <div class="w-full relative" ref="container" v-click-outside="{ handler: 'close', exclude: ['optionsContainer'] }">
     <button ref="focusElement"
-            class="btn flex justify-between items-center w-full outline-none border-[1px] bg-white rounded p-2 pl-4
+            class="btn flex justify-between items-center w-full outline-none border-[1px] bg-white rounded p-2
                   font-inter text-sm font-normal leading-5"
             :class="{
               'sci-cursor-edit': !isOpen && withEditCursor,
               'border-sn-light-grey hover:border-sn-sleepy-grey': !isOpen,
-              'border-sn-science-blue': isOpen
+              'border-sn-science-blue': isOpen,
+              'text-sn-grey': !valueLabel,
+              [className]: true
             }"
             :disabled="disabled"
             @click="toggle">
-      <span>{{ valueLabel }}</span>
+      <span>{{ valueLabel || this.placeholder || this.i18n.t('general.select') }}</span>
       <i class="sn-icon" :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen}"></i>
     </button>
-    <perfect-scrollbar ref="optionsContainer"
-                       :style="optionPositionStyle"
-                       class="relative scroll-container p-2.5 pt-0 z-10 bg-white rounded border-[1px] border-sn-light-grey shadow-flyout-shadow max-h-[25rem]"
-                       :class="{
-                         'block': isOpen,
-                         'hidden': !isOpen
-                       }">
-      <div v-if="withButtons" class="sticky z-10 top-0 bg-white">
-        <div class="pb-1 pt-2.5 rounded flex gap-1 justify-start items-center">
-          <div class="btn btn-light !text-xs active:bg-sn-super-light-blue"
+    <div :style="optionPositionStyle" class="py-2.5 z-10 bg-white rounded border-[1px] border-sn-light-grey shadow-sn-menu-sm" :class="{ 'hidden': !isOpen }">
+      <div v-if="withButtons" class="px-2.5">
+        <div class="flex gap-2 pl-2 pb-2.5 justify-start items-center w-[calc(100%-10px)]">
+          <div class="btn btn-light !text-xs h-[30px] px-0 active:bg-sn-super-light-blue"
                @click="selectedValues = []"
                :class="{
                  'disabled cursor-default': !selectedValues.length,
                  'cursor-pointer': selectedValues.length
                }"
               >{{ i18n.t('general.clear') }}</div>
-          <div class="btn btn-light !text-xs active:bg-sn-super-light-blue"
+          <div class="btn btn-light !text-xs h-[30px] px-0 active:bg-sn-super-light-blue"
                @click="selectedValues = options.map(option => option.id)"
                :class="{
                 'disabled cursor-default': options.length === selectedValues.length,
@@ -38,30 +34,38 @@
           </div>
         </div>
       </div>
-      <div v-if="options.length" class="flex flex-col gap-[1px]">
-        <div v-for="option in options"
-             :key="option.id"
-             class="p-3 rounded hover:bg-sn-super-light-grey cursor-pointer flex gap-1 justify-start">
-          <div class="sci-checkbox-container">
-            <input v-model="selectedValues" :value="option.id" :id="option.id" type="checkbox" class="sci-checkbox project-card-selector mr-1">
-            <label :for="option.id" class="sci-checkbox-label"></label>
+      <perfect-scrollbar ref="optionsContainer"
+                         class="relative scroll-container px-2.5 pt-0"
+                         :class="{
+                           'block': isOpen,
+                           [optionsClassName]: true 
+                         }">
+        <div v-if="options.length" class="flex flex-col gap-[1px]">
+          <div v-for="option in options"
+               :key="option.id"
+               class="px-3 py-2 rounded hover:bg-sn-super-light-grey cursor-pointer flex gap-1 justify-start items-center">
+            <div class="sci-checkbox-container">
+              <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 class="text-ellipsis overflow-hidden max-h-[4rem] ml-1">{{ option.label }}</span>
           </div>
-          <span class="text-ellipsis overflow-hidden max-h-[4rem]">{{ option.label }}</span>
         </div>
-      </div>
-      <template v-else>
-        <div
-          class="sn-select__no-options"
-        >
-          {{ this.noOptionsPlaceholder }}
-        </div>
-      </template>
-    </perfect-scrollbar>
+        <template v-else>
+          <div
+            class="sn-select__no-options"
+          >
+            {{ this.noOptionsPlaceholder }}
+          </div>
+        </template>
+      </perfect-scrollbar>
+    </div>
   </div>
 </template>
 
 <script>
   import PerfectScrollbar from 'vue2-perfect-scrollbar';
+  import outsideClick from '../../packs/vue/directives/outside_click';
 
   export default {
     name: 'ChecklistSelect',
@@ -73,7 +77,12 @@
       options: { type: Array, default: () => [] },
       placeholder: { type: String },
       noOptionsPlaceholder: { type: String },
-      disabled: { type: Boolean, default: false }
+      disabled: { type: Boolean, default: false },
+      className: { type: String, default: '' },
+      optionsClassName: { type: String, default: '' }
+    },
+    directives: {
+      'click-outside': outsideClick
     },
     data() {
       return {
@@ -87,9 +96,7 @@
     },
     computed: {
       valueLabel() {
-        if (!this.selectedValues.length) {
-          return (this.placeholder || this.i18n.t('general.select'));
-        }
+        if (!this.selectedValues.length) return
 
         return `${this.selectedValues.length} ${this.i18n.t('general.selected')}`;
       }

app/javascript/vue/shared/date_picker.vue

@@ -16,6 +16,7 @@
       class='inline-block m-0 p-0 w-full border-none shadow-none outline-none'
       :id="this.selectorId"
       :placeholder="placeholder || 'dd/mm/yyyy'"
+      :disabled="disabled"
     />
   </div>
 </template>
@@ -31,7 +32,8 @@
       useCurrent: { type: Boolean, default: true },
       defaultValue: { type: Date, default: null },
       standAlone: { type: Boolean, default: false, required: false },
-      className: { type: String, default: '' }
+      className: { type: String, default: '' },
+      disabled: { type: Boolean, default: false }
     },
     mounted() {
       $("#" + this.selectorId).datetimepicker(

app/javascript/vue/shared/date_time_picker.vue

@@ -7,6 +7,7 @@
       :defaultValue="defaultValue"
       :standAlone="standAlone"
       :className="dateClassName"
+      :disabled="disabled"
     />
     <TimePicker v-if="!dateOnly"
       @change="updateTime"
@@ -15,6 +16,7 @@
       :defaultValue="getTime(defaultValue)"
       :standAlone="standAlone"
       :className="timeClassName"
+      :disabled="disabled"
     />
   </div>
 </template>
@@ -33,7 +35,8 @@
       placeholder: { type: String },
       standAlone: { type: Boolean, default: false, required: false },
       dateClassName: { type: String, default: '' },
-      timeClassName: { type: String, default: '' }
+      timeClassName: { type: String, default: '' },
+      disabled: { type: Boolean, default: false }
     },
     data() {
       return {

app/javascript/vue/shared/inline_edit.vue

@@ -4,8 +4,9 @@
       <input type="text"
         v-if="singleLine"
         ref="input"
-        class="inline-block leading-5 outline-none pl-0 py-1 border-0 border-solid border-y w-full border-t-transparent"
+        class="inline-block leading-5 outline-none pl-0 border-0 border-solid border-y w-full border-t-transparent"
         :class="{
+          'py-1': !singleLine,
           'inline-edit-placeholder text-sn-grey caret-black': isBlank,
           'border-b-sn-delete-red': error,
           'border-b-sn-science-blue': !error,
@@ -33,8 +34,8 @@
     <div
       v-else
       ref="view"
-      class="grid sci-cursor-edit leading-5 border-0 py-1 outline-none border-solid border-y border-transparent"
-      :class="{ 'text-sn-grey font-normal': isBlank, 'whitespace-pre-line': !singleLine }"
+      class="grid sci-cursor-edit leading-5 border-0 outline-none border-solid border-y border-transparent"
+      :class="{ 'text-sn-grey font-normal': isBlank, 'whitespace-pre-line py-1': !singleLine }"
       @click="enableEdit($event)"
     >
       <span :class="{'truncate': singleLine }" v-if="smartAnnotation" v-html="sa_value || placeholder" ></span>

app/javascript/vue/shared/select.vue

@@ -17,11 +17,8 @@
       </button>
       <i class="sn-icon" :class="{ 'sn-icon-down': !isOpen, 'sn-icon-up': isOpen}"></i>
     </slot>
-    <perfect-scrollbar ref="optionsContainer"
-                       :style="optionPositionStyle"
-                       class="sn-select__options scroll-container p-2.5 pt-0 block"
-    >
-      <div v-if="withClearButton" class="sticky z-10 top-0 pt-2.5 bg-white">
+    <div :style="optionPositionStyle" class="py-2.5 bg-white z-10 shadow-sn-menu-sm" :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 active:bg-sn-super-light-blue"
              :class="{
@@ -31,29 +28,35 @@
           {{ i18n.t('general.clear') }}
         </div>
       </div>
-      <div v-if="options.length" class="flex flex-col gap-[1px]">
-        <div
-          v-for="option in options"
-          :key="option[0]"
-          @mousedown.prevent.stop="setValue(option[0])"
-          class="sn-select__option p-3 rounded"
-          :title="option[1]"
-          :class="{
-            'select__option-placeholder': option[2],
-            '!bg-sn-super-light-blue': option[0] == value,
-          }"
-        >
-          {{ option[1] }}
+      <perfect-scrollbar ref="optionsContainer"
+                         class="sn-select__options !relative !top-0 !left-[-1px] !shadow-none scroll-container px-2.5 pt-0 block"
+                         :class="{ [optionsClassName]: true }"
+      >
+  
+        <div v-if="options.length" class="flex flex-col gap-[1px]">
+          <div
+            v-for="option in options"
+            :key="option[0]"
+            @mousedown.prevent.stop="setValue(option[0])"
+            class="sn-select__option p-3 rounded shadow-none"
+            :title="option[1]"
+            :class="{
+              'select__option-placeholder': option[2],
+              '!bg-sn-super-light-blue': option[0] == value,
+            }"
+          >
+            {{ option[1] }}
+          </div>
         </div>
-      </div>
-      <template v-else>
-        <div
-          class="sn-select__no-options"
-        >
-          {{ this.noOptionsPlaceholder }}
-        </div>
-      </template>
-    </perfect-scrollbar>
+        <template v-else>
+          <div
+            class="sn-select__no-options"
+          >
+            {{ this.noOptionsPlaceholder }}
+          </div>
+        </template>
+      </perfect-scrollbar>
+    </div>
   </div>
 </template>
 <script>
@@ -71,6 +74,7 @@
       placeholder: { type: String },
       noOptionsPlaceholder: { type: String },
       className: { type: String, default: '' },
+      optionsClassName: { type: String, default: '' },
       disabled: { type: Boolean, default: false }
     },
     directives: {

app/javascript/vue/shared/select_search.vue

@@ -1,6 +1,8 @@
 <template>
   <Select
-    class="sn-select--search"
+    class="sn-select sn-select--search"
+    :className="className"
+    :optionsClassName="optionsClassName"
     :withEditCursor="withEditCursor"
     :withClearButton="withClearButton"
     :value="value"
@@ -34,7 +36,9 @@
       searchPlaceholder: { type: String },
       noOptionsPlaceholder: { type: String },
       disabled: { type: Boolean },
-      isLoading: { type: Boolean, default: false }
+      isLoading: { type: Boolean, default: false },
+      className: { type: String, default: '' },
+      optionsClassName: { type: String, default: '' }
     },
     components: { Select },
     data() {

app/javascript/vue/shared/time_picker.vue

@@ -15,6 +15,7 @@
       :id="this.selectorId"
       type="text"
       data-mask-type="time"
+      :disabled="disabled"
       v-model="value"
       placeholder="HH:mm"
     />
@@ -28,7 +29,8 @@
       selectorId: { type: String, required: true },
       defaultValue: { type: String, required: false },
       standAlone: { type: Boolean, default: true, required: false },
-      className: { type: String, default: '', required: false }
+      className: { type: String, default: '', required: false },
+      disabled: { type: Boolean, default: false }
     },
     data() {
       return {

config/tailwind.config.js

@@ -60,6 +60,7 @@ module.exports = {
       },
       boxShadow: {
         'flyout-shadow': '0px 1px 4px rgba(35, 31, 32, 0.15)',
+        'sn-menu-sm': '0px 16px 32px 0px rgba(16, 24, 40, 0.07)',
       },
       transitionTimingFunction: {
         sharp: 'cubic-bezier(.4, 0, .6, 1)',