Responsive data tables

H2-invent · Nov 27, 2023 · e31f66c · e31f66c
1 parent 13647f1
commit e31f66c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/assets/scripts/datatables.js b/assets/scripts/datatables.js
@@ -2,6 +2,7 @@ import DataTable from "datatables.net-dt";
 
 Array.prototype.forEach.call(document.getElementsByClassName('dataTable'), function (element) {
     new DataTable('#' + element.getAttribute('id'), {
+        responsive: true,
         dom: 'Bfrtip',
         buttons: [
             {

diff --git a/assets/styles/dataTablesApp.css b/assets/styles/dataTablesApp.css
@@ -5,7 +5,8 @@ td, th {
 }
 
 .dataTables_wrapper {
-    @apply rounded-xl border;
+    /* sub 17.5rem = article ml-60 (width: 15rem) + px-3 (width: 1.5rem) + 1rem */
+    @apply rounded-xl border max-w-[calc(100vw_-_17.5rem)] overflow-x-auto;
 }
 
 .dataTables_wrapper::after {
@@ -46,7 +47,7 @@ td, th {
 }
 
 table.dataTable {
-    @apply min-w-full divide-y divide-surface-300 border-y;
+    @apply w-full divide-y divide-surface-300 border-y;
 }
 
 table.dataTable > thead {

diff --git a/assets/styles/tailmater.css b/assets/styles/tailmater.css
@@ -745,7 +745,7 @@ body {
 }
 
 aside {
-    @apply hover:shadow-material hover:shadow-material w-60 rounded-r-2xl h-full overflow-hidden;
+    @apply hover:shadow-material hover:shadow-material w-60 rounded-r-2xl h-full overflow-hidden z-50;
 }
 
 #topbar, aside {