Layout tweak for search field

src/static/css/floating_labels.css

@@ -127,7 +127,11 @@
 /*.dataTables_length, .dataTables_info, .dataTables_paginate {*/
 /*!*visibility: hidden*!*/
 /*}*/
-
+@media (max-width: 480px) {
+    .table-search-field {
+        width: 100% !important;
+    }
+}
 
 /* ------------------------------------------------------------------------------------------------------------------ */
 /* --                                Multiple User deletion Custom checkbox                                        -- */
@@ -192,7 +196,7 @@
 /* ------------------------------------------------------------------------------------------------------------------ */
 /* --                                Realm delete                                                                  -- */
 /* ------------------------------------------------------------------------------------------------------------------ */
-.realm-delete-link{
+.realm-delete-link {
     color: #6c757d;
 }
 

src/static/js/main.js

@@ -5,9 +5,16 @@ $(document).ready(function () {
     // if ($(TABLE_CLASS)) {
     const data_table = $(TABLE_CLASS).DataTable({
         "lengthMenu": [[-1], ["All"]],
-        "dom": 'it',
+        "bPaginate": true,
+        "pageLength": 10,
+        // "sPaginationType": "custom",
+        "dom": 'itlp',
+        // "paginate": {
+        //     next: '<i class="fas fa-arrow-alt-circle-right"></i>',
+        //     previous: '<i class="fas fa-arrow-alt-circle-left"></i>'
+        // },
         rowReorder: {
-            selector: 'td:nth-child(2)'
+            selector: true,
         },
         responsive: true,
     });

src/templates/macros/utils_macros.jinja2

@@ -21,7 +21,7 @@
 {% endmacro %}
 
 {% macro get_user_table(realm, users) -%}
-    <div class="form-group w-25 float-right">
+    <div class="table-search-field form-group w-25 float-right">
         <input type="text"
                class="form-control"
                id="data-table-search-input">