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.
This commit is contained in:
Zack Spear
2025-05-08 18:53:53 -07:00
parent 1441566513
commit a8f432058f
8 changed files with 154 additions and 56 deletions
@@ -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>