Multiple CSS fixes for navigation [SCI-8289][SCI-8313][SCI-8288][SCI-8273][SCI-8309]

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;

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;

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;

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 {

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));
 

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;

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">

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">

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">