diff --git a/assets/scripts/datatables.js b/assets/scripts/datatables.js
index 10a0f238..979ebb48 100644
--- 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
index 250c8fd2..d23443bc 100644
--- 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
index 57167376..6029ac0a 100644
--- 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 {