datatables scroll fix

pages/_includes/cards/invoices.html

@@ -2,6 +2,13 @@
    <div class="card-header">
       <h3 class="card-title">Invoices</h3>
    </div>
+   <style>
+         @media screen and (max-width: 550px){
+            #scroll-padding {
+               display: inline-block !important;
+            }
+         }
+      </style>
    <div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap">
 
       <div class="mb-0">
@@ -17,6 +24,7 @@
             <div class="ml-2 d-inline-block" style="width: 10rem;">
                <input type="text" class="form-control">
             </div>
+            <div id="scroll-padding" class="d-none" style="width: 1.10rem"></div>
       </div>
 
    </div>
@@ -66,7 +74,7 @@
                </span>
             </td>
             <td style="padding-right: 1rem;">
-               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm2 float-right"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
             </td>
          </tr>
          {% endfor %}
@@ -78,9 +86,9 @@
       <div class="mb-0 d-flex align-items-center">
          <p class="mb-0 align-middle">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
       </div>
-      
       <div class="mb-0 ml-4">
             <a href="#" class="btn btn-secondary disabled">Previous</a><a href="#" class="btn btn-primary ml-2">1</a><a href="#" class="btn btn-secondary ml-2">2</a><a href="#" class="btn btn-secondary ml-2 font-weight-bold text-secondary">Next</a>
+            <div id="scroll-padding" class="d-none" style="width: 1.10rem"></div>
       </div>
 
    </div>