style: refactor table structure across multiple pages for scrollable layout on smaller screen sizes

- Wrapped tables in a <div> with class "TableContainer" for better responsiveness.
- Ensured consistent styling and structure across ArrayDevices.page, BootDevice.page, DiskList.page, ShareList.page, DockerContainers.page, Plugins.page, and VMMachines.page.
- Updated CSS to support new table container classes for enhanced layout control.

emhttp/plugins/dynamix.docker.manager/DockerContainers.page

@@ -28,10 +28,25 @@ $cpus    = cpu_list();
 ?>
 <link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
 
-<table id="docker_containers" class="tablesorter shift">
-<thead><tr><th><a id="resetsort" class="nohand" onclick="resetSorting()" title="_(Reset sorting)_"><i class="fa fa-th-list"></i></a>_(Application)_</th><th>_(Version)_</th><th>_(Network)_</th><th>_(Container IP)_</th><th>_(Container Port)_</th><th>_(LAN IP:Port)_</th><th>_(Volume Mappings)_ <small>(_(App to Host)_)</small></th><th class="load advanced">_(CPU & Memory load)_</th><th class="nine">_(Autostart)_</th><th class="five">_(Uptime)_</th></tr></thead>
-<tbody id="docker_list"><tr><td colspan='9'></td></tr></tbody>
-</table>
+<div class="TableContainer--widest">
+    <table id="docker_containers" class="tablesorter shift">
+        <thead>
+            <tr>
+                <th><a id="resetsort" class="nohand" onclick="resetSorting()" title="_(Reset sorting)_"><i class="fa fa-th-list"></i></a>_(Application)_</th>
+                <th>_(Version)_</th>
+                <th>_(Network)_</th>
+                <th>_(Container IP)_</th>
+                <th>_(Container Port)_</th>
+                <th>_(LAN IP:Port)_</th>
+                <th>_(Volume Mappings)_ <small>(_(App to Host)_)</small></th>
+                <th class="load advanced">_(CPU & Memory load)_</th>
+                <th class="nine">_(Autostart)_</th>
+                <th class="five">_(Uptime)_</th>
+            </tr>
+        </thead>
+        <tbody id="docker_list"><tr><td colspan='9'></td></tr></tbody>
+    </table>
+</div>
 <input type="button" onclick="addContainer()" value="_(Add Container)_" style="display:none">
 <input type="button" onclick="startAll()" value="_(Start All)_" style="display:none">
 <input type="button" onclick="stopAll()" value="_(Stop All)_" style="display:none">

emhttp/plugins/dynamix.plugin.manager/Plugins.page

@@ -151,7 +151,19 @@ $(function() {
   $('.tabs').append("<span id='removeall' class='status vhshift' style='display:none;margin-left:12px'><input type='button' value=\"_(Remove Selected Plugins)_\" onclick='removeList()'></span>");
 });
 </script>
-<table class='unraid tablesorter plugins shift' id='plugin_table'>
-<thead><tr><th></th><th>_(Plugin)_</th><th>_(Author)_</th><th>_(Version)_</th><th>_(Status)_</th><th>_(Uninstall)_</th></tr></thead>
-<tbody id="plugin_list"><tr><td colspan="6"></td><tr></tbody>
-</table>
+
+<div class="TableContainer">
+    <table class='unraid tablesorter plugins shift' id='plugin_table'>
+        <thead>
+            <tr>
+                <th></th>
+                <th>_(Plugin)_</th>
+                <th>_(Author)_</th>
+                <th>_(Version)_</th>
+                <th>_(Status)_</th>
+                <th>_(Uninstall)_</th>
+            </tr>
+        </thead>
+        <tbody id="plugin_list"><tr><td colspan="6"></td><tr></tbody>
+    </table>
+</div>

emhttp/plugins/dynamix.vm.manager/VMMachines.page

@@ -486,10 +486,23 @@ $(function() {
 });
 </script>
 
-<table id="kvm_table" class="tablesorter four shift">
-<thead><tr><th class="th1"><a id="resetsort" class="nohand" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-th-list"></i></a>_(Name)_</th><th class="th2">_(Description)_</th><th>_(CPUs)_</th><th>_(Memory)_</th><th>_(vDisks / vCDs)_</th><th>_(Graphics)_</th><th>_(IP Address)_</th><th class="th3">_(Autostart)_</th></tr></thead>
-<tbody id="kvm_list"><tr><td colspan='8'></td></tr></tbody>
-</table>
+<div class="TableContainer--widest">
+    <table id="kvm_table" class="tablesorter four shift">
+        <thead>
+            <tr>
+                <th class="th1"><a id="resetsort" class="nohand" onclick="resetSorting()" title="Reset sorting"><i class="fa fa-th-list"></i></a>_(Name)_</th>
+                <th class="th2">_(Description)_</th>
+                <th>_(CPUs)_</th>
+                <th>_(Memory)_</th>
+                <th>_(vDisks / vCDs)_</th>
+                <th>_(Graphics)_</th>
+                <th>_(IP Address)_</th>
+                <th class="th3">_(Autostart)_</th>
+            </tr>
+        </thead>
+        <tbody id="kvm_list"><tr><td colspan='8'></td></tr></tbody>
+    </table>
+</div>
 
 <input type="button" onclick="addVM()" id="btnAddVM" value="_(Add VM)_" style="display:none">
 <input type="button" onclick="startAll()" value="_(Start All)_" style="display:none">

emhttp/plugins/dynamix/ArrayDevices.page

@@ -21,34 +21,34 @@ $power = _var($display,'power') && in_array('nvme',array_column(main_filter($dis
 $('#tab1').bind({click:function() {$('i.toggle').show('slow');}});
 <?endif;?>
 </script>
-
-<table class="unraid disk_status">
-    <thead>
-        <tr>
-            <td>_(Device)_</td>
-            <td>_(Identification)_</td>
-            <td><?=$power?>_(Temp)_</td>
-            <td>_(Reads)_</td>
-            <td>_(Writes)_</td>
-            <td>_(Errors)_</td>
-            <td>_(FS)_</td>
-            <td>_(Size)_</td>
-            <td>_(Used)_</td>
-            <td>_(Free)_</td>
-        </tr>
-    </thead>
-    <tbody id="array_devices">
-        <? foreach (main_filter($disks) as $disk) :?>
-            <? if (substr($disk['status'],0,7) != 'DISK_NP') :?>
-                <tr><td colspan='10'></td></tr>
+<div class="TableContainer">
+    <table class="unraid disk_status">
+        <thead>
+            <tr>
+                <td>_(Device)_</td>
+                <td>_(Identification)_</td>
+                <td><?=$power?>_(Temp)_</td>
+                <td>_(Reads)_</td>
+                <td>_(Writes)_</td>
+                <td>_(Errors)_</td>
+                <td>_(FS)_</td>
+                <td>_(Size)_</td>
+                <td>_(Used)_</td>
+                <td>_(Free)_</td>
+            </tr>
+        </thead>
+        <tbody id="array_devices">
+            <? foreach (main_filter($disks) as $disk) :?>
+                <? if (substr($disk['status'],0,7) != 'DISK_NP') :?>
+                    <tr><td colspan='10'></td></tr>
+                <? endif;?>
+            <? endforeach;?>
+            <? if (_var($display,'total') && _var($var,'mdNumDisks',0) > 1) :?>
+                <tr class='tr_last'><td colspan='10'></td></tr>
             <? endif;?>
-        <? endforeach;?>
-        <? if (_var($display,'total') && _var($var,'mdNumDisks',0) > 1) :?>
-            <tr class='tr_last'><td colspan='10'></td></tr>
-        <? endif;?>
-    </tbody>
-</table>
-
+        </tbody>
+    </table>
+</div>
 :main_array_devices_help:
 
 <?if (_var($var,'fsState')=="Stopped"):?>

emhttp/plugins/dynamix/BootDevice.page

@@ -19,12 +19,27 @@ Tag="paw"
 $('#tab3').bind({click:function() {$('i.toggle').show('slow');}});
 <?endif;?>
 </script>
-
-<table class="unraid disk_status">
-<thead><tr><td>_(Device)_</td><td>_(Identification)_</td><td>_(Temp)_</td><td>_(Reads)_</td><td>_(Writes)_</td><td>_(Errors)_</td><td>_(FS)_</td><td>_(Size)_</td><td>_(Used)_</td><td>_(Free)_</td></tr></thead>
-<tbody id="boot_device">
-<?if (isset($disks['flash'])) echo "<tr><td colspan='10'></td></tr>";?>
-</tbody>
-</table>
-
+<div class="TableContainer">
+    <table class="unraid disk_status">
+    <thead>
+        <tr>
+            <td>_(Device)_</td>
+            <td>_(Identification)_</td>
+            <td>_(Temp)_</td>
+            <td>_(Reads)_</td>
+            <td>_(Writes)_</td>
+            <td>_(Errors)_</td>
+            <td>_(FS)_</td>
+            <td>_(Size)_</td>
+            <td>_(Used)_</td>
+            <td>_(Free)_</td>
+        </tr>
+    </thead>
+    <tbody id="boot_device">
+    <?if (isset($disks['flash'])) :?>
+        <tr><td colspan='10'></td></tr>
+    <?endif;?>
+    </tbody>
+    </table>
+</div>
 :boot_device_help:

emhttp/plugins/dynamix/DiskList.page

@@ -15,10 +15,22 @@ Cond="_var($var,'fsState')!='Stopped' && _var($var,'shareDisk')!='no'"
  * all copies or substantial portions of the Software.
  */
 ?>
-<table class="unraid share_status">
-<thead><tr><td>_(Name)_</td><td>_(Comment)_</td><td>_(SMB)_</td><td>_(NFS)_</td><td>_(Type)_</td><td>_(Size)_</td><td>_(Free)_</td></tr></thead>
-<tbody id="disk_list"></tbody>
-</table>
+<div class="TableContainer">
+    <table class="unraid share_status">
+        <thead>
+            <tr>
+                <td>_(Name)_</td>
+                <td>_(Comment)_</td>
+                <td>_(SMB)_</td>
+                <td>_(NFS)_</td>
+                <td>_(Type)_</td>
+                <td>_(Size)_</td>
+                <td>_(Free)_</td>
+            </tr>
+        </thead>
+        <tbody id="disk_list"></tbody>
+    </table>
+</div>
 
 <input id="compute-disks" type="button" value="_(Compute All)_" onclick="$(this).prop('disabled',true);diskList('',-1)">
 

emhttp/plugins/dynamix/ShareList.page

@@ -33,10 +33,22 @@ $disks		= parse_ini_file('state/disks.ini',true) ?? [];
 $nodisks	= checkDisks($disks) ? "" : "disabled";
 ?>
 
-<table class="unraid share_status">
-<thead><tr><td>_(Name)_</td><td>_(Comment)_</td><td>_(SMB)_</td><td>_(NFS)_</td><td>_(Storage)_</td><td>_(Size)_</td><td>_(Free)_</td></tr></thead>
-<tbody id="shareslist"></tbody>
-</table>
+<div class="TableContainer">
+    <table class="unraid share_status">
+        <thead>
+            <tr>
+                <td>_(Name)_</td>
+                <td>_(Comment)_</td>
+                <td>_(SMB)_</td>
+                <td>_(NFS)_</td>
+                <td>_(Storage)_</td>
+                <td>_(Size)_</td>
+                <td>_(Free)_</td>
+            </tr>
+        </thead>
+        <tbody id="shareslist"></tbody>
+    </table>
+</div>
 
 <form name="share_form" method="POST" action="<?=htmlspecialchars($path)?>/Share?name=">
 <input type="button" id="compute-shares" value="_(Compute All)_" onclick="$(this).prop('disabled',true);shareList('',-1)">

emhttp/plugins/dynamix/styles/default-base.css

@@ -588,7 +588,7 @@ div.title.shift {
 #displaybox {
     width: 100%;
     margin: 0 auto;
-    padding: 0 1rem 4rem;
+    padding: 1rem 1rem 4rem;
     box-sizing: border-box;
 }
 
@@ -812,6 +812,25 @@ div.title.shift {
     );
     background: linear-gradient(90deg, var(--gray-400) 0, var(--gray-200));
 }
+
+.TableContainer {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    table {
+        min-width: 900px;
+    }
+}
+
+.TableContainer--widest {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+
+    table {
+        min-width: 1345px;
+    }
+}
+
 table {
     border-collapse: collapse;
     border-spacing: 0;