revise layout of compound identifiers to avoid overflow

ippisite/ippidb/templates/compound_card.html

@@ -55,7 +55,7 @@
   <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">
+        <div class="card inner-wrap">
           <div class="card-body">
             {% include "compound_l_item.html" with compound=compound show_detail=True %}
           </div>

ippisite/ippidb/templates/compound_l_item.html

@@ -24,16 +24,16 @@
       <li class="list-group-item">Common name: {{ compound.common_name }}</li>
       {% endif %}
       {% if compound.canonical_smile %}
-      <li class="list-group-item">Canonical SMILES: {{ compound.canonical_smile }}</li>
+      <li class="list-group-item">Canonical SMILES: <pre style="overflow: scroll;">{{ compound.canonical_smile }}</pre></li>
       {% endif %}
       {% if compound.iupac_name %}
-      <li class="list-group-item">IUPAC name: {{ compound.iupac_name }}</li>
+      <li class="list-group-item">IUPAC name: <pre style="overflow: scroll;">{{ compound.iupac_name }}</pre></li>
       {% endif %}
       {% if compound.inchi %}
-      <li class="list-group-item">InChi: {{ compound.inchi }}</li>
+      <li class="list-group-item">InChi: <pre style="overflow: scroll;">{{ compound.inchi }}</pre></li>
       {% endif %}
       {% if compound.inchikey %}
-      <li class="list-group-item">InChiKey: {{ compound.inchikey }}</li>
+      <li class="list-group-item">InChiKey: <pre style="overflow: scroll;">{{ compound.inchikey }}</pre></li>
       {% endif %}
     </ul>
     {%if compound.pubchem_id or compound.chembl_id or compound.chemspider_id or compound.ligand_id %}

ippisite/ippidb/templates/compound_list.html

@@ -29,7 +29,7 @@
 </div>
 
 <div class="inner-wrap container-fluid ">
-    <div class="row flex-xl-nowrap">
+    <div class="row">
 
         <main class="col-12" role="main">
             <h1 class="page-title">Query compounds</h1>