Fix inventory page layout [SCI-8515]

app/assets/javascripts/repositories/repository_datatable.js

@@ -657,7 +657,7 @@ var RepositoryDatatable = (function(global) {
       },
       fnInitComplete: function() {
         window.initActionToolbar();
-        window.actionToolbarComponent.setBottomOffset(70);
+        window.actionToolbarComponent.setBottomOffset(75);
         initHeaderTooltip();
         disableCheckboxToggleOnCheckboxPreview();
 
@@ -681,9 +681,6 @@ var RepositoryDatatable = (function(global) {
 
         $('.dataTables_filter').addClass('hidden');
         addRepositorySearch();
-        if ($('.repository-show').length) {
-          $('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', '');
-        }
 
         $('.repository-toolbar, .pagination-row').removeClass('hidden');
 

app/assets/stylesheets/repositories.scss

@@ -6,14 +6,7 @@
 
 
 .repository-show {
-  height: calc(100vh - var(--navbar-height));
-  left: var(--left-navigation-width);
   margin: 0;
-  padding: 0 2em;
-  position: absolute;
-  top: var(--navbar-height);
-  transition: .4s $timing-function-sharp;
-  width: calc(100% - var(--left-navigation-width));
 
   &.active {
     [data-view-mode="archived"] {
@@ -34,22 +27,8 @@
       background-color: $color-white;
       border: 0;
       display: flex;
-      left: var(--left-navigation-width);
-      margin-left: 0em;
-      padding: 0 2em;
-      position: fixed;
-      transition: .4s $timing-function-sharp;
-      width: calc(100% - var(--left-navigation-width));
       z-index: 100;
 
-      .toolbar-delimiter {
-        border-bottom: $border-tertiary;
-        bottom: 0;
-        margin-left: -2em;
-        position: absolute;
-        width: 100%;
-      }
-
       .repository-share-icon {
         flex-shrink: 0;
         margin-top: -2px;
@@ -126,23 +105,15 @@
   }
 
   .dataTables_scroll {
-    padding-bottom: 5em;
-    padding-top: 10em;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: calc(100% - var(--datatable-pagination-row) - var(--repository-top-toolbar-height));
+    padding-bottom: 12px;
+    z-index: 1;
 
     .dataTables_scrollHead {
-      position: -webkit-sticky !important;
-      position: sticky !important;
-      top: calc(10em + var(--navbar-height));
       z-index: 90;
-
-      .table.dataTable {
-        margin-top: 0 !important;
-        transition: .4s $timing-function-sharp;
-
-        th {
-          transition: width .2s;
-        }
-      }
     }
 
     .dataTables_scrollBody {
@@ -155,14 +126,8 @@
   .pagination-row {
     align-items: center;
     background-color: $color-white;
-    bottom: 0;
     display: flex;
     height: 5em;
-    left: var(--left-navigation-width);
-    padding: 0 2em;
-    position: fixed;
-    transition: .4s $timing-function-sharp;
-    width: calc(100% - var(--left-navigation-width));
     z-index: 90;
 
     .pagination-info,
@@ -563,13 +528,10 @@
   }
 
   .repository-edit-overlay--pagination {
-    bottom: 0;
     height: 5em;
     line-height: 5em;
     padding: .5em;
-    position: fixed;
     text-align: center;
-    width: calc(100% - var(--left-navigation-width));
 
     hr {
       margin-top: -2.5em;

app/assets/stylesheets/repository/repository_table.scss

@@ -5,8 +5,22 @@
 @import "layouts/reminders";
 
 .repository-table {
+  --content-header-size: 5em;
+  --repository-top-toolbar-height: 4.25rem;
+  height: calc(100vh - var(--navbar-height) - var(--content-header-size));
   position: relative;
 
+  .dataTables_wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+
+  .dataTables_scrollHead {
+    flex-shrink: 0;
+  }
+
   .dataTables_filter {
     display: flex;
     float: right;

app/assets/stylesheets/repository/repository_toolbar.scss

@@ -6,17 +6,11 @@
     align-items: center;
     background-color: $color-white;
     display: flex;
-    flex-grow: 1;
     flex-wrap: nowrap;
-    height: 6em;
-    left: var(--left-navigation-width);
-    padding: 1em 2em 0;
-    position: fixed;
-    top: calc(4em + var(--navbar-height));
-    transition: .4s $timing-function-sharp;
-    width: calc(100% - var(--left-navigation-width));
-    z-index: 99;
     justify-content: space-between;
+    padding: 1rem 0;
+    z-index: 99;
+
 
     .view-switch,
     .filter-container {
@@ -109,20 +103,12 @@
     .toolbar-right-block {
       display: flex;
       flex-shrink: 0;
-
-      >* {
-        margin-right: .25em;
-
-        &:nth-last-child(1) {
-          margin-right: 0;
-        }
-      }
+      gap: .25rem;
 
       .active-reminders-filter {
         align-items: center;
         cursor: pointer;
         display: flex;
-        margin-right: 1em;
 
         .sci-checkbox-container {
           margin-right: .5em;

app/views/layouts/fluid.html.erb

@@ -1,6 +1,4 @@
 <% content_for :content do %>
-  <div class="<%= yield :container_class %>" id="fluid-content">
-    <%= yield %>
-  </div>
+  <%= yield %>
 <% end %>
 <%= render template: 'layouts/application' %>

app/views/repositories/show.html.erb

@@ -7,7 +7,6 @@
 <% provide(:container_class, "no-second-nav-container") %>
 <% provide(:sidebar_url, sidebar_repositories_path) %>
 <% provide(:sidebar_title, t('sidebar.repositories.sidebar_title')) %>
-<div id="alert-container"></div>
 
 <div class="content-pane repository-show <%=  @repository.archived? || params[:archived] ? "archived" : "active" %>" data-table-url="<%= load_table_repository_path(@repository) %>">
   <div id="repository-toolbar" class="content-header">
@@ -45,13 +44,12 @@
         <% end %>
       </div>
       <div class="repo-datatables-buttons">
-        <button class="btn btn-light manage-repo-column-index"
+        <button class="btn btn-light manage-repo-column-index icon-btn"
                 data-modal-url="<%= repository_repository_columns_path(@repository) %>"
                 data-action="new">
           <span class="fas fa-columns">
         </button>
       </div>
-      <div class="toolbar-delimiter"></div>
     </div>
   </div>