Improve table responsive

pkg/web/templates/index.html

@@ -47,6 +47,17 @@
     #reloadBanner {
       display: none;
     }
+    
+    /* Improve table readability on small screens */
+    @media (max-width: 575px) {
+      .table th, .table td {
+        font-size: 0.8rem;
+        padding: 5px;
+      }
+      .table thead {
+        font-size: 1rem;
+      }
+    }
   </style>
 </head>
 
@@ -399,6 +410,7 @@ function renderDashboard(data) {
   } else {
     html += ''
       + '<h2><span data-bs-toggle="tooltip" data-bs-placement="top" title="The Overview displays the currently enabled jails that you have added to your jail.local configuration.">Overview</span></h2>'
+      + '<div class="table-responsive">'
       + '<table class="table table-striped" id="jailsTable">'
       + '  <thead>'
       + '    <tr>'
@@ -425,7 +437,7 @@ function renderDashboard(data) {
         + '</tr>';
     });
 
-    html += '</tbody></table>';
+    html += '</tbody></table></div>';
   }
 
   // Last 5 bans
@@ -434,6 +446,7 @@ function renderDashboard(data) {
     html += '<p>No recent bans found.</p>';
   } else {
     html += ''
+      + '<div class="table-responsive">'
       + '<table class="table table-bordered">'
       + '  <thead>'
       + '    <tr>'
@@ -443,7 +456,7 @@ function renderDashboard(data) {
       + '      <th>Log Line</th>'
       + '    </tr>'
       + '  </thead>'
-      + '  <tbody>';
+      + '  <tbody></div>';
 
     data.lastBans.forEach(function(e) {
       html += ''