CSS: Protocol templates UI issues [SCI-8790] (#5736)

* CSS: Protocol templates UI issues [SCI-8790]

* Reorder css properties

* Remove whitespace in scss

* Adding flexible class to protocols-show

app/assets/stylesheets/protocol_management.scss

@@ -12,8 +12,6 @@
 .btn-open-file {
   overflow: hidden;
   position: relative;
-  margin-top: 9px;
-  margin-bottom: 4px;
 
   > input[type=file] {
     background: $color-white;

app/assets/stylesheets/protocols/protocol.scss

@@ -5,10 +5,14 @@
 @import "mixins";
 
 .content-pane.protocols-show {
+  --container-margin: 20px;
   background-color: $color-alto;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-height) - var(--container-margin));
   overflow: hidden;
   padding: 0 0 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   .title-row h1 {
     max-width: 100%;
@@ -16,6 +20,7 @@
 
   .content-header {
     padding: 0 1.5rem;
+    align-self: stretch;
   }
 
   .protocol-breadcrumbs {
@@ -26,9 +31,9 @@
     background-color: $color-white;
     border-radius: 2px;
     box-shadow: $flyout-shadow;
-    margin: 20px auto;
-    max-width: 900px;
+    margin: var(--container-margin) 0;
     padding: 10px 10px 10px 26px;
+    width: 900px;
   }
 
   .dropdown-menu {
@@ -40,7 +45,7 @@
   }
 
   .protocol-section {
-    margin: 16px 0 16px -20px;
+    margin: 16px 0;
 
     &.protocol-steps-section {
       margin-left: 0;

app/javascript/vue/protocol/container.vue

@@ -36,7 +36,7 @@
       </div>
     </div>
     <div id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
-      <div class="protocol-description">
+      <div>
         <div class="protocol-name" v-if="!inRepository">
           <InlineEdit
             v-if="urls.update_protocol_name_url"

app/views/protocols/show.html.erb

@@ -3,7 +3,7 @@
   <%= render partial: "/shared/sidebar/templates_sidebar", locals: {active: :protocol} %>
 <% end %>
  <% provide(:container_class, 'no-second-nav-container') %>
-<div class="content-pane protocols-show" >
+<div class="content-pane protocols-show flexible" >
   <div class="content-header">
     <div class="title-row">
       <h1>