Merge pull request #5979 from wandji20/wb-SCI-9018

Fix CSS issues in protocols, and quick start(new task) [SCI-9018]

app/assets/stylesheets/dashboard/create_task_modal.scss

@@ -33,6 +33,12 @@
       .create-new {
         padding: 0 5px;
       }
+
+      .dropdown-option {
+        overflow: hidden;
+        text-overflow: clip;
+        white-space: nowrap;
+      }
     }
 
     .new-projects-visibility {

app/assets/stylesheets/projects.scss

@@ -964,9 +964,7 @@ li.module-hover {
 
             .name {
               align-items: center;
-              grid-column: 1 span;
               -webkit-box-orient: vertical;
-              display: -webkit-box;
               display: flex;
               -webkit-line-clamp: 2;
             }

app/assets/stylesheets/repository_columns/index.scss

@@ -207,6 +207,7 @@
       }
 
       .vis {
+        display: inline-block;
         margin-left: 10px;
         margin-right: 5px;
 

app/javascript/vue/protocol/container.vue

@@ -36,7 +36,7 @@
       </div>
     </div>
     <div id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
-      <div>
+      <div class="ml-9 mb-8">
         <div class="protocol-name" v-if="!inRepository">
           <InlineEdit
             v-if="urls.update_protocol_name_url"
@@ -67,7 +67,7 @@
             </div>
           </div>
           <div id="protocol-description-container" :class=" inRepository ? 'protocol-description collapse in' : ''" >
-            <div v-if="urls.update_protocol_description_url">
+            <div class="ml-1" v-if="urls.update_protocol_description_url">
               <Tinymce
                 :value="protocol.attributes.description"
                 :value_html="protocol.attributes.description_view"

app/javascript/vue/protocol/protocolMetadata.vue

@@ -33,7 +33,7 @@
         </p>
         <p class="data-block" v-if="protocol.attributes.published">
           <span>{{ i18n.t("protocols.header.published_by") }}</span>
-          <img :src="protocol.attributes.published_by.avatar"/>
+          <img :src="protocol.attributes.published_by.avatar" class="rounded-full"/>
           {{ protocol.attributes.published_by.name }}
         </p>
         <p class="data-block">
@@ -46,7 +46,7 @@
         </p>
         <p class="data-block">
           <span>{{ i18n.t("protocols.header.added_by") }}</span>
-          <img :src="protocol.attributes.added_by.avatar"/>
+          <img :src="protocol.attributes.added_by.avatar" class="rounded-full"/>
           {{ protocol.attributes.added_by.name }}
         </p>
         <p class="data-block authors-data">