Merge pull request #7202 from rekonder/aj_SCI_10281

Fix various CSS problems [SCI-10281]

app/javascript/vue/experiments/card.vue

@@ -57,7 +57,7 @@
         <div v-if="imageLoading" class="flex absolute top-0 items-center justify-center w-full flex-grow h-full z-10">
           <img src="/images/medium/loading.svg" alt="Loading" />
         </div>
-        <img v-else :src="workflow_img" class="max-h-18 max-w-[72px]">
+        <img v-else-if="!hasError" :src="workflow_img" @error="hasError = true" class="max-h-full max-w-full">
       </div>
     </div>
     <Description :params="{data: params, value: params.description, dtComponent: dtComponent}" />

app/javascript/vue/experiments/modals/description.vue

@@ -14,7 +14,7 @@
           {{ experiment.description }}
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+          <button type="button" class="btn btn-primary" data-dismiss="modal">{{ i18n.t('general.close') }}</button>
         </div>
       </div>
     </div>

app/javascript/vue/experiments/renderers/description.vue

@@ -7,10 +7,11 @@
               'line-clamp-1': params.dtComponent.currentViewRender === 'table',
               'line-clamp-2': params.dtComponent.currentViewRender === 'cards'
             }"
+            :title="params.data.sa_description"
             @click.stop="showDescriptionModal"
             v-html="params.data.sa_description">
       </span>
-      <span v-else class="grow" v-html="params.data.sa_description"></span>
+      <span v-else class="grow" v-html="params.data.sa_description" :title="params.data.sa_description"></span>
       <span v-if="shouldTruncateText" @click.stop="showDescriptionModal" class="text-sn-blue cursor-pointer shrink-0 text-sm">{{ i18n.t('experiments.card.more') }}</span>
     </div>
   </div>

app/javascript/vue/experiments/renderers/name.vue

@@ -4,7 +4,7 @@
       <div v-if="imageLoading" class="flex absolute top-0 items-center justify-center w-full flex-grow h-full z-10">
         <img src="/images/medium/loading.svg" alt="Loading" class="w-4 h-4" />
       </div>
-      <img v-else :src="workflow_img" class="max-h-9 max-w-[36px]">
+      <img v-else-if="!hasError" :src="workflow_img" @error="hasError = true" class="max-h-9 max-w-[36px]">
     </div>
     <a :href="params.data.urls.show" class="hover:no-underline truncate"
         :title="params.data.name">

app/javascript/vue/experiments/workflow_img_mixin.js

@@ -12,7 +12,8 @@ export default {
   data() {
     return {
       workflow_img: null,
-      imageLoading: false
+      imageLoading: false,
+      hasError: false
     };
   },
   methods: {

app/javascript/vue/my_modules/renderers/designated_users.vue

@@ -3,7 +3,7 @@
     <template v-slot:field>
       <div v-if="!params.data.folder" class="flex items-center gap-1 cursor-pointer h-9" @click="openAccessModal">
         <div v-for="(user, i) in visibleUsers" :key="i" :title="user.full_name">
-          <img :src="user.avatar" class="w-7 h-7" />
+          <img :src="user.avatar" class="w-7 h-7 rounded-full" />
         </div>
         <div v-if="hiddenUsers.length > 0" :title="hiddenUsersTitle"
             class="flex shrink-0 items-center justify-center w-7 h-7 text-xs

app/javascript/vue/projects/renderers/users.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="!params.data.folder" class="flex items-center gap-1 cursor-pointer h-9" @click="openAccessModal">
     <div v-for="(user, i) in visibleUsers" :key="i" :title="user.full_name">
-      <img :src="user.avatar" class="w-7 h-7" />
+      <img :src="user.avatar" class="w-7 h-7 rounded-full" />
     </div>
     <div v-if="hiddenUsers.length > 0" :title="hiddenUsersTitle"
         class="flex shrink-0 items-center justify-center w-7 h-7 text-xs rounded-full bg-sn-dark-grey text-sn-white">

app/javascript/vue/shared/datatable/table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full" :class="{'pb-4': windowScrollerSeen && selectedRows.length === 0}">
     <div class="relative flex flex-col flex-grow z-10">
       <Toolbar
         :toolbarActions="toolbarActions"
@@ -179,7 +179,8 @@ export default {
       tableState: null,
       userSettingsUrl: null,
       fetchedTableState: null,
-      gridReady: false
+      gridReady: false,
+      windowScrollerSeen: false
     };
   },
   components: {
@@ -388,6 +389,7 @@ export default {
       }));
     },
     resize() {
+      this.windowScrollerSeen = document.documentElement.scrollWidth > document.documentElement.clientWidth;
       if (this.tableState) return;
 
       this.columnApi?.autoSizeAllColumns();

app/serializers/lists/experiment_serializer.rb

@@ -15,10 +15,6 @@ module Lists
       I18n.l(object.created_at, format: :full_date)
     end
 
-    def workflow_img
-      rails_blob_path(object.workflowimg, only_path: true) if object.workflowimg.attached?
-    end
-
     def sa_description
       @user = scope[:user] || @instance_options[:user]
       custom_auto_link(object.description,