Compound_card - Fix compound header when scrolling

ippisite/ippidb/static/css/compounds_list.css

@@ -223,21 +223,15 @@ Description: IPPI-DB Theme
 }
 
 .compound_header_title {
-    overflow: auto;
-    position: relative;
-}
-
-.compound_2D {
-    position: fixed;
-    display: flex;
-}
-
-.fix-compound_2D {
-    background-color: #eee;
-    position: fixed;
-    top: 15px;
+    position: sticky;
+    top:0;
+    background-color: #ffffff;
+    margin-bottom: 18px; 
+    border-radius: 3px; 
+    box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
 }
 
 .bg_warning{
     background-color: #fbbf839e;
-}
+}
\ No newline at end of file

ippisite/ippidb/templates/compound_card.html

@@ -31,9 +31,9 @@
       {{ compound.id }}{% endblock %}
     </div>
   </nav>
-  <div class="container-fluid inner-wrap compound_header_title" id="compound_header_title" style="margin-bottom: 18px; border-radius: 3px; box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);">
+  <div class="container-fluid inner-wrap compound_header_title" id="compound_header_title">
     <div class="row">
-      {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width=150 height=150%}
+      {% include "compound_smiles_draw.html" with id=compound.id smile=compound.canonical_smile width=250 height=250%}
       <div class="{% if compound.is_validated is False %}bg_warning{% endif %}" style="display: flex;
       align-items: center;">
         <h1 class="page-title" style="margin: 0;">Compound {{ compound.id }}</h1>
@@ -47,7 +47,7 @@
   <div class="top">
 
   </div>
-  <div class="row" style="display: inline-block;height:auto;">
+  <div class="row" style="display: inline-block;height:auto; margin-right: 15px; margin-left: 15px;">
     <div class="tab-content" id="tabContent">
       <div class="tab-pane fade show active" id="compound" role="tabpanel" aria-labelledby="compound-tab">
         <div class="card">
@@ -308,16 +308,4 @@
     $('[href="' + tabHash + '"]').tab('show');
   });
 </script>
-<script>
-  $("#compound_header_title").on("scroll", function (e) {
-    console.log("scroll");
-    if (this.scrollTop > 300) {
-
-      $("#compound_header_title").addClass("fix-compound_2D");
-    } else {
-      $("#compound_header_title").removeClass("fix-compound_2D");
-    }
-
-  });
-</script>
 {% endblock %}
\ No newline at end of file