From 007eae16ccbb5032c821b84db0f5a47bbfb9e363 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Wed, 24 May 2023 12:03:47 +0200
Subject: [PATCH] Multiple small css fixes [SCI-8518]]SCI-8529]

---
 .../label_templates/label_templates_datatable.js       |  4 ++--
 app/assets/stylesheets/label_templates/index.scss      | 10 ++++++++++
 app/assets/stylesheets/my_modules/protocols/index.scss |  8 ++++++++
 app/assets/stylesheets/protocols/protocol.scss         | 10 +++-------
 app/views/my_modules/_header.html.erb                  |  2 +-
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/label_templates/label_templates_datatable.js b/app/assets/javascripts/label_templates/label_templates_datatable.js
index d0aaf47c5..66a3eb813 100644
--- a/app/assets/javascripts/label_templates/label_templates_datatable.js
+++ b/app/assets/javascripts/label_templates/label_templates_datatable.js
@@ -24,10 +24,10 @@
   }
 
   function renderNameHTML(data, type, row) {
-    return `${data.icon_image_tag}<a
+    return `<div class="flex gap-2">${data.icon_image_tag}<a
       href='${row.DT_RowAttr['data-edit-url']}'
       class='label-info-link'
-    >${data.name}</a>`;
+    >${data.name}</a></div>`;
   }
 
   function addAttributesToRow(row, data) {
diff --git a/app/assets/stylesheets/label_templates/index.scss b/app/assets/stylesheets/label_templates/index.scss
index 6b83826de..6f45893a4 100644
--- a/app/assets/stylesheets/label_templates/index.scss
+++ b/app/assets/stylesheets/label_templates/index.scss
@@ -82,6 +82,10 @@
       .dataTables_scrollBody {
         height: 100%;
 
+        td {
+          white-space: nowrap;
+        }
+
         td:nth-child(2) {
           text-align: center;
         }
@@ -106,6 +110,12 @@
 
 .label-template-name {
   vertical-align: middle;
+
+  .label-info-link {
+    max-width: 16rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .label-template-icon {
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index ddc388bd9..148bbf6d1 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -7,6 +7,14 @@
 @import "constants";
 @import "mixins";
 
+.my-module-header {
+  .title-row {
+    .my_module-name {
+      max-width: calc(100% - 38rem);
+    }
+  }
+}
+
 .content-pane.my-modules-protocols-index {
   background-color: $color-alto;
   padding: 0 1rem 1rem !important;
diff --git a/app/assets/stylesheets/protocols/protocol.scss b/app/assets/stylesheets/protocols/protocol.scss
index 9b11c7763..d1d9c918c 100644
--- a/app/assets/stylesheets/protocols/protocol.scss
+++ b/app/assets/stylesheets/protocols/protocol.scss
@@ -6,18 +6,16 @@
 
 .content-pane.protocols-show {
   background-color: $color-alto;
-  margin: 0 -16px;
   min-height: calc(100vh - var(--navbar-height));
   overflow: hidden;
   padding: 0 0 10px;
-  width: calc(100% + 31px);
 
   .title-row h1 {
     max-width: 100%;
   }
 
   .content-header {
-    padding: 0 2em;
+    padding: 0 1.5rem;
   }
 
   .protocol-breadcrumbs {
@@ -106,11 +104,9 @@
       margin-bottom: 2em;
 
       .data-block {
+        display: flex;
+        gap: .5rem;
         margin-bottom: 16px;
-
-        > :nth-child(2) {
-          margin-left: 8px;
-        }
       }
 
       .authors-data {
diff --git a/app/views/my_modules/_header.html.erb b/app/views/my_modules/_header.html.erb
index 19420c1d1..49575dfc8 100644
--- a/app/views/my_modules/_header.html.erb
+++ b/app/views/my_modules/_header.html.erb
@@ -1,4 +1,4 @@
-<div class="content-header sticky-header">
+<div class="content-header sticky-header my-module-header">
   <div class="title-row">
     <i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
     <h1 class="my_module-name" data-toggle="tooltip" data-placement="bottom" title="<%= @my_module.name %>">