From c27c7245bcd135a7f2010a396d76c81f7c03021b Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Thu, 3 Aug 2023 15:14:44 +0200
Subject: [PATCH] Fix various CSS issues [SCI-8940]

- Maintain the position of the top navigation controls when user is without team.
- Add "missing" avatar to avatar change modal
- Disable wrapping of (A) in archived P/E/T
- Fix padding/margin issues in Archived tasks and Protocol templates
---
 app/assets/stylesheets/label_templates/show.scss    | 4 ++--
 app/assets/stylesheets/projects.scss                | 2 +-
 app/assets/stylesheets/protocols/protocol.scss      | 2 +-
 app/assets/stylesheets/themes/scinote.scss          | 1 +
 app/javascript/vue/navigation/top_menu.vue          | 4 ++--
 app/views/experiments/_show_header.html.erb         | 2 +-
 app/views/my_modules/_header.html.erb               | 2 +-
 app/views/projects/show/_header.html.erb            | 2 +-
 app/views/users/shared/_user_avatars_modal.html.erb | 4 ++--
 9 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/label_templates/show.scss b/app/assets/stylesheets/label_templates/show.scss
index 2a1c3cd70..6e548560e 100644
--- a/app/assets/stylesheets/label_templates/show.scss
+++ b/app/assets/stylesheets/label_templates/show.scss
@@ -12,9 +12,9 @@
     background: $color-white;
     border-bottom: $border-tertiary;
     display: flex;
-    margin-left: -2em;
+    margin: 0 -2em;
     padding: .25em 2em;
-    width: calc(100% + 4em);
+    width: calc(100% + 3em);
 
     .label-template-icon {
       flex-shrink: 0;
diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss
index 00bb3c329..7301b437d 100644
--- a/app/assets/stylesheets/projects.scss
+++ b/app/assets/stylesheets/projects.scss
@@ -300,7 +300,7 @@ path, ._jsPlumb_endpoint {
   }
 
   .designated-users-task-title {
-    padding-left: 15px;
+    padding: 7px 0 0 15px;
   }
 
   .user-role {
diff --git a/app/assets/stylesheets/protocols/protocol.scss b/app/assets/stylesheets/protocols/protocol.scss
index 626662ec2..636fe4395 100644
--- a/app/assets/stylesheets/protocols/protocol.scss
+++ b/app/assets/stylesheets/protocols/protocol.scss
@@ -6,7 +6,7 @@
 
 .content-pane.protocols-show {
   background-color: $color-alto;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-height) - 40px);
   overflow: hidden;
   padding: 0 0 10px;
 
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 3621f393f..33ba92e1c 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1255,6 +1255,7 @@ body > .loading-overlay {
 
   .avatar-image {
     position: absolute;
+    width: 100%;
 
     img {
       border-radius: 50%;
diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue
index 14be00683..d15f7ec7b 100644
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@@ -4,7 +4,7 @@
       <input type="text" :placeholder="i18n.t('nav.search')" @change="searchValue"/>
       <i class="sn-icon sn-icon-search"></i>
     </div>
-    <div v-if="currentTeam" class="mr-auto w-64">
+    <div v-if="currentTeam" class="w-64">
       <Select
         :value="currentTeam"
         :options="teams"
@@ -14,7 +14,7 @@
         @change="switchTeam"
       ></Select>
     </div>
-    <div v-if="user" class="dropdown" >
+    <div v-if="user" class="ml-auto dropdown" >
       <button class="btn btn-light icon-btn btn-black" data-toggle="dropdown" :title="i18n.t('nav.support')">
         <i class="sn-icon sn-icon-help"></i>
       </button>
diff --git a/app/views/experiments/_show_header.html.erb b/app/views/experiments/_show_header.html.erb
index 1ccd8b1e0..5a93cf91f 100644
--- a/app/views/experiments/_show_header.html.erb
+++ b/app/views/experiments/_show_header.html.erb
@@ -3,7 +3,7 @@
     <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="experimnet-name" data-toggle="tooltip" data-placement="bottom" title="<%= @experiment.name %>">
       <% if @experiment.archived_branch? %>
-        <span><%= t('labels.archived')%></span>&nbsp;
+        <span class="whitespace-nowrap"><%= t('labels.archived')%></span>&nbsp;
       <% end %>
       <% if @inline_editable_title_config.present? %>
               <%= render partial: "shared/inline_editing",
diff --git a/app/views/my_modules/_header.html.erb b/app/views/my_modules/_header.html.erb
index 09b1cd41a..4ac11d218 100644
--- a/app/views/my_modules/_header.html.erb
+++ b/app/views/my_modules/_header.html.erb
@@ -3,7 +3,7 @@
     <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 %>">
       <% if @my_module.archived_branch? %>
-        <span><%= t('labels.archived')%></span>&nbsp;
+        <span class="whitespace-nowrap"><%= t('labels.archived')%></span>&nbsp;
       <% end %>
       <% if @inline_editable_title_config.present? %>
               <%= render partial: "shared/inline_editing",
diff --git a/app/views/projects/show/_header.html.erb b/app/views/projects/show/_header.html.erb
index 66cd56cd3..e23dffde2 100644
--- a/app/views/projects/show/_header.html.erb
+++ b/app/views/projects/show/_header.html.erb
@@ -3,7 +3,7 @@
     <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="project-name">
       <% if @project.archived? %>
-        <span><%= t('labels.archived')%></span>&nbsp;
+        <span class="whitespace-nowrap"><%= t('labels.archived')%></span>&nbsp;
       <% end %>
       <% if @inline_editable_title_config.present? %>
               <%= render partial: "shared/inline_editing",
diff --git a/app/views/users/shared/_user_avatars_modal.html.erb b/app/views/users/shared/_user_avatars_modal.html.erb
index ca96420f2..198045de5 100644
--- a/app/views/users/shared/_user_avatars_modal.html.erb
+++ b/app/views/users/shared/_user_avatars_modal.html.erb
@@ -12,7 +12,7 @@
         <div class="modal-body">
           <div class="upload-block">
               <div class="current-avatar">
-                <%= image_tag avatar_path(current_user, :medium) %>
+                <%= image_tag avatar_path(current_user, :thumb) %>
                 <%= file_field_tag :raw_avatar, style: "display:none" %>
                 <%= hidden_field_tag :new_avatar, "" %>
               </div>
@@ -36,4 +36,4 @@
         </div>
       </div>
     </div>
-  </div>
\ No newline at end of file
+  </div>