From caf21959bd27a9ea605430067c5dfe8030c8c208 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Thu, 13 Apr 2023 14:54:03 +0200
Subject: [PATCH] Multiple CSS fixes for navigation
 [SCI-8289][SCI-8313][SCI-8288][SCI-8273][SCI-8309]

---
 app/assets/stylesheets/navigation/general.scss        |  4 +++-
 app/assets/stylesheets/navigation/left_menu.scss      |  5 +++++
 app/assets/stylesheets/navigation/notifications.scss  | 11 +++++++++++
 app/assets/stylesheets/navigation/top_menu.scss       |  7 +++++++
 app/assets/stylesheets/repositories.scss              |  3 +--
 .../stylesheets/repository/repository_toolbar.scss    |  2 +-
 app/javascript/vue/navigation/top_menu.vue            |  3 ++-
 app/views/layouts/application.html.erb                |  3 ++-
 .../protocols/index/_protocols_datatable.html.erb     |  2 +-
 9 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/navigation/general.scss b/app/assets/stylesheets/navigation/general.scss
index d70c287d0..87032a957 100644
--- a/app/assets/stylesheets/navigation/general.scss
+++ b/app/assets/stylesheets/navigation/general.scss
@@ -7,7 +7,9 @@
   grid-template-areas: "top top top"
                        "left breadcrumbs breadcrumbs"
                        "left navigator content";
-  grid-template-columns: var(--left-navigation) var(--navigator-navigation) auto;
+  grid-template-columns: var(--left-navigation)
+                         var(--navigator-navigation)
+                         calc(100% - var(--left-navigation) - var(--navigator-navigation));
   grid-template-rows: var(--top-navigation) var(--breadcrumbs-navigation) auto;
   height: 100vh;
   position: relative;
diff --git a/app/assets/stylesheets/navigation/left_menu.scss b/app/assets/stylesheets/navigation/left_menu.scss
index 3ed9cccdc..42e7986dc 100644
--- a/app/assets/stylesheets/navigation/left_menu.scss
+++ b/app/assets/stylesheets/navigation/left_menu.scss
@@ -11,6 +11,7 @@
   width: 100%;
 
   .sci--layout--menu-item {
+    @include font-small;
     align-items: center;
     color: $color-black;
     cursor: pointer;
@@ -21,6 +22,10 @@
     text-decoration: none;
     width: 100%;
 
+    .fas {
+      font-size: 1.125rem;
+    }
+
     &[data-active='true'] {
       background-color: $color-gainsboro;
       box-shadow: inset 4px 0 0 $brand-primary;
diff --git a/app/assets/stylesheets/navigation/notifications.scss b/app/assets/stylesheets/navigation/notifications.scss
index 6f4d2a912..66df0372f 100644
--- a/app/assets/stylesheets/navigation/notifications.scss
+++ b/app/assets/stylesheets/navigation/notifications.scss
@@ -4,6 +4,14 @@
 .sci--navigation--notificaitons-flyout-container {
   position: relative;
 
+  .sci--navigation--notificaitons-flyout-backdrop {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: var(--top-navigation);
+  }
+
   .sci--navigation--notificaitons-flyout {
     background-color: $color-white;
     border-radius: 0 0  $border-radius-default $border-radius-default;
@@ -57,7 +65,10 @@
     }
 
     .sci--navigation--notificaitons-flyout-notifications {
+      margin-left: -1.5rem;
+      padding: 0 1.5rem;
       position: relative;
+      width: calc(100% + 3rem);
 
       .next-page-loader {
         align-items: center;
diff --git a/app/assets/stylesheets/navigation/top_menu.scss b/app/assets/stylesheets/navigation/top_menu.scss
index 14c50e613..a77720814 100644
--- a/app/assets/stylesheets/navigation/top_menu.scss
+++ b/app/assets/stylesheets/navigation/top_menu.scss
@@ -46,6 +46,13 @@
     display: flex;
     gap: 1em;
     margin-left: .75em;
+
+    span {
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .dropdown-menu li a {
diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss
index e2aff94b6..9f06fd125 100644
--- a/app/assets/stylesheets/repositories.scss
+++ b/app/assets/stylesheets/repositories.scss
@@ -6,7 +6,6 @@
 
 :root {
   --repository-sidebar-margin: 363px;
-  --repository-content-pane-margin: 108px;
 }
 
 .repository-show {
@@ -15,7 +14,7 @@
   margin: 0;
   padding: 0 2em;
   position: absolute;
-  top: var(--repository-content-pane-margin);
+  top: var(--navbar-height);
   transition: .4s $timing-function-sharp;
   width: calc(100vw - var(--repository-sidebar-margin));
 
diff --git a/app/assets/stylesheets/repository/repository_toolbar.scss b/app/assets/stylesheets/repository/repository_toolbar.scss
index 7bdb0e978..5073dc7b0 100644
--- a/app/assets/stylesheets/repository/repository_toolbar.scss
+++ b/app/assets/stylesheets/repository/repository_toolbar.scss
@@ -12,7 +12,7 @@
     left: var(--repository-sidebar-margin);
     padding: 1em 2em 0;
     position: fixed;
-    top: calc(4em + var(--repository-content-pane-margin));
+    top: calc(4em + var(--navbar-height));
     transition: .4s $timing-function-sharp;
     width: calc(100% - var(--repository-sidebar-margin));
     z-index: 99;
diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue
index d02e0531a..81ad38da2 100644
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@@ -52,11 +52,12 @@
       <button class="btn btn-light icon-btn" data-toggle="dropdown" @click="notificationsOpened = !notificationsOpened">
         <i class="fas fa-bell"></i>
       </button>
+      <div v-if="notificationsOpened" class="sci--navigation--notificaitons-flyout-backdrop" @click="notificationsOpened = false"></div>
       <NotificationsFlyout v-if="notificationsOpened" :notifications-url="notificationsUrl" @close="notificationsOpened = false" />
     </div>
     <div v-if="user" class="dropdown">
       <div class="sci--navigation--top-menu-user" data-toggle="dropdown">
-        {{ i18n.t('nav.user_greeting', { full_name: user.name })}}
+        <span>{{ i18n.t('nav.user_greeting', { full_name: user.name })}}</span>
         <img class="avatar" :src="user.avatar_url">
       </div>
       <div class="dropdown-menu dropdown-menu-right">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index bcb9e3dff..9124d4980 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -65,7 +65,8 @@
       <div class="sci--layout-navigation-left">
         <%= render "shared/navigation/left" if user_signed_in? %>
       </div>
-      <div class="sci--layout-navigation-navigator">
+      <!-- temporary fix for sidebar (#wrapper) -->
+      <div id="wrapper" class="sci--layout-navigation-navigator">
         <%= render "shared/navigation/navigator" %>
       </div>
       <div class="sci--layout-navigation-breadcrumbs">
diff --git a/app/views/protocols/index/_protocols_datatable.html.erb b/app/views/protocols/index/_protocols_datatable.html.erb
index fec2a3c3b..4818b9d6f 100644
--- a/app/views/protocols/index/_protocols_datatable.html.erb
+++ b/app/views/protocols/index/_protocols_datatable.html.erb
@@ -1,6 +1,6 @@
 <div id="protocols-datatable-spinner">
   <div class="protocols-datatable">
-    <table id="protocols-table" class="table" data-team-id="<%= @current_team.id %>" data-type="<%= @type %>" data-source="<%= datatable_protocols_path(team: @current_team, type: @type) %>">
+    <table id="protocols-table" class="table" style="width: 100%" data-team-id="<%= @current_team.id %>" data-type="<%= @type %>" data-source="<%= datatable_protocols_path(team: @current_team, type: @type) %>">
       <thead>
         <tr>
           <th id="select-all">