Migrate more tables to .units-table (#3662)

* Add .units-table-heading-cell

To control which column has the "heading cell".

* Migrate List Backup Exclusions to .units-table

* Tidy formatting

* Migrate List Mail DNS to .units-table

* Migrate List Backup Detail to .units-table

web/css/src/themes/default.css

@@ -955,13 +955,6 @@
 }
 
 .units-table-cell {
-	/* Row heading cell */
-	&:nth-child(2) {
-		font-size: 0.9rem;
-		padding-top: 5px;
-		padding-bottom: 5px;
-	}
-
 	& a {
 		color: #353535;
 
@@ -979,13 +972,18 @@
 		&:nth-child(1) {
 			line-height: 0.6;
 		}
+	}
+}
 
-		/* Row heading cell */
-		&:nth-child(2) {
-			font-size: 0.8rem;
-			padding-top: 10px;
-			padding-bottom: 10px;
-		}
+.units-table-heading-cell {
+	font-size: 0.9rem;
+	padding-top: 5px;
+	padding-bottom: 5px;
+
+	@media (--viewport-large) {
+		font-size: 0.8rem;
+		padding-top: 10px;
+		padding-bottom: 10px;
 	}
 }
 

web/templates/pages/list_access_keys.php

@@ -78,7 +78,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Access Key") ?>:</span>
 					<a href="/list/access-key/?key=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Access Key") ?>: <?= $key ?>">
 						<?= $key ?>

web/templates/pages/list_backup.php

@@ -74,7 +74,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("File Name") ?>:</span>
 					<?php if ($read_only === "true") { ?>
 						<?= $key ?>

web/templates/pages/list_backup_detail.php

@@ -32,18 +32,15 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units js-units-container">
-		<div class="header units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<div>
-					<div class="clearfix l-unit__stat-col--left super-compact">
-						<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>">
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4"><b><?= _("Type") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left wide-7"><b><?= _("Details") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-right compact-4"><b><?= _("Restore") ?></b></div>
-				</div>
+
+	<div class="units-table js-units-container">
+		<div class="units-table-header">
+			<div class="units-table-cell">
+				<input type="checkbox" class="js-toggle-all-checkbox" title="<?= _("Select all") ?>" <?= $display_mode ?>>
 			</div>
+			<div class="units-table-cell"><?= _("Type") ?></div>
+			<div class="units-table-cell"><?= _("Details") ?></div>
+			<div class="units-table-cell"><?= _("Restore") ?></div>
 		</div>
 
 		<!-- List web domains -->
@@ -54,28 +51,34 @@
 				if (!empty($key)) {
 					++$i;
 			?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
+					<div>
 						<input id="check<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="web[]" value="<?= $key ?>">
+						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4">
-						<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("Web Domain") ?></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-7">
-						<div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?= $key ?></b></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4 u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<div class="actions-panel__col actions-panel__list shortcut-enter" data-key-action="href">
-									<a href="/schedule/restore/?backup=<?= $backup ?>&type=web&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Restore") ?>">
-										<i class="fas fa-arrow-rotate-left icon-green icon-dim u-mr5"></i>
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
+				</div>
+				<div class="units-table-cell units-table-heading-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
+					<?= _("Web Domain") ?>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Details") ?>:</span>
+					<?= $key ?>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<li class="units-table-row-action shortcut-enter" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="/schedule/restore/?backup=<?= $backup ?>&type=web&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Restore") ?>"
+							>
+								<i class="fas fa-arrow-rotate-left icon-green"></i>
+								<span class="u-hide-desktop"><?= _("Restore") ?></span>
+							</a>
+						</li>
+					</ul>
 				</div>
 			</div>
 		<?php }} ?>
@@ -86,28 +89,34 @@
 			foreach ($mail as $key) {
 				if (!empty($key)) {
 			?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
+					<div>
 						<input id="check2<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="mail[]" value="<?= $key ?>">
+						<label for="check2<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4">
-						<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("Mail Domain") ?></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-7">
-						<div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?= $key ?></b></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4 u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<div class="actions-panel__col actions-panel__list shortcut-enter" data-key-action="href">
-									<a href="/schedule/restore/?backup=<?= $backup ?>&type=mail&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Restore") ?>">
-										<i class="fas fa-arrow-rotate-left icon-green icon-dim"></i>
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
+				</div>
+				<div class="units-table-cell units-table-heading-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
+					<?= _("Mail Domain") ?>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Details") ?>:</span>
+					<?= $key ?>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<li class="units-table-row-action shortcut-enter" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="/schedule/restore/?backup=<?= $backup ?>&type=mail&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Restore") ?>"
+							>
+								<i class="fas fa-arrow-rotate-left icon-green"></i>
+								<span class="u-hide-desktop"><?= _("Restore") ?></span>
+							</a>
+						</li>
+					</ul>
 				</div>
 			</div>
 		<?php }} ?>
@@ -118,28 +127,34 @@
 			foreach ($dns as $key) {
 				if (!empty($key)) {
 			?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
+					<div>
 						<input id="check3<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="dns[]" value="<?= $key ?>">
+						<label for="check3<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4">
-						<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("DNS Zone") ?></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-7">
-						<div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?= $key ?></b></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4 u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<div class="actions-panel__col actions-panel__list shortcut-enter" data-key-action="href">
-									<a href="/schedule/restore/?backup=<?= $backup ?>&type=dns&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Restore") ?>">
-										<i class="fas fa-arrow-rotate-left icon-green icon-dim"></i>
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
+				</div>
+				<div class="units-table-cell units-table-heading-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
+					<?= _("DNS Zone") ?>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Details") ?>:</span>
+					<?= $key ?>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<li class="units-table-row-action shortcut-enter" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="/schedule/restore/?backup=<?= $backup ?>&type=dns&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Restore") ?>"
+							>
+								<i class="fas fa-arrow-rotate-left icon-green"></i>
+								<span class="u-hide-desktop"><?= _("Restore") ?></span>
+							</a>
+						</li>
+					</ul>
 				</div>
 			</div>
 		<?php }} ?>
@@ -150,28 +165,34 @@
 			foreach ($db as $key) {
 				if (!empty($key)) {
 			?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
+					<div>
 						<input id="check4<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="db[]" value="<?= $key ?>">
+						<label for="check4<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4">
-						<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("Database") ?></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-7">
-						<div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?= $key ?></b></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4 u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<div class="actions-panel__col actions-panel__list shortcut-enter" data-key-action="href">
-									<a href="/schedule/restore/?backup=<?= $backup ?>&type=db&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Restore") ?>">
-										<i class="fas fa-arrow-rotate-left icon-green icon-dim"></i>
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
+				</div>
+				<div class="units-table-cell units-table-heading-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
+					<?= _("Database") ?>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Details") ?>:</span>
+					<?= $key ?>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<li class="units-table-row-action shortcut-enter" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="/schedule/restore/?backup=<?= $backup ?>&type=db&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Restore") ?>"
+							>
+								<i class="fas fa-arrow-rotate-left icon-green"></i>
+								<span class="u-hide-desktop"><?= _("Restore") ?></span>
+							</a>
+						</li>
+					</ul>
 				</div>
 			</div>
 		<?php }} ?>
@@ -179,29 +200,35 @@
 		<!-- List Cron Jobs -->
 		<?php if (!empty($data[$backup]["CRON"])) {
 		if (!empty($key)) { ?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
+					<div>
 						<input id="check5<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="check" value="<?= $key ?>">
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4">
-						<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("Cron Jobs") ?></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-7">
-						<div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?= _("Jobs") ?></b></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4 u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<div class="actions-panel__col actions-panel__list shortcut-enter" data-key-action="href">
-									<a href="/schedule/restore/?backup=<?= $backup ?>&type=cron&object=records&token=<?= $_SESSION["token"] ?>" title="<?= _("Restore") ?>">
-										<i class="fas fa-arrow-rotate-left icon-green icon-dim"></i>
-									</a>
-								</div>
-							</div>
-						</div>
+						<label for="check5<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
+				<div class="units-table-cell units-table-heading-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
+					<?= _("Cron Jobs") ?>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Details") ?>:</span>
+					<?= _("Jobs") ?>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<li class="units-table-row-action shortcut-enter" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="/schedule/restore/?backup=<?= $backup ?>&type=cron&object=records&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Restore") ?>"
+							>
+								<i class="fas fa-arrow-rotate-left icon-green"></i>
+								<span class="u-hide-desktop"><?= _("Restore") ?></span>
+							</a>
+						</li>
+					</ul>
+				</div>
 			</div>
 		<?php }} ?>
 
@@ -211,32 +238,39 @@
 			foreach ($udir as $key) {
 				if (!empty($key)) {
 			?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
+					<div>
 						<input id="check6<?= $i ?>" class="js-unit-checkbox" type="checkbox" name="udir[]" value="<?= $key ?>">
+						<label for="check6<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4">
-						<div class="l-unit__stat-col l-unit__stat-col--left"><?= _("User Directory") ?></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left wide-7">
-						<div class="l-unit__stat-col l-unit__stat-col--left wide-7"><b><?= $key ?></b></div>
-					</div>
-					<div class="clearfix l-unit__stat-col--left compact-4 u-text-right">
-						<div class="l-unit-toolbar__col l-unit-toolbar__col--right u-noselect">
-							<div class="actions-panel clearfix">
-								<div class="actions-panel__col actions-panel__list shortcut-enter" data-key-action="href">
-									<a href="/schedule/restore/?backup=<?= $backup ?>&type=udir&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("Restore") ?>">
-										<i class="fas fa-arrow-rotate-left icon-green icon-dim"></i>
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
+				</div>
+				<div class="units-table-cell units-table-heading-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
+					<?= _("User Directory") ?>
+				</div>
+				<div class="units-table-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Details") ?>:</span>
+					<?= $key ?>
+				</div>
+				<div class="units-table-cell">
+					<ul class="units-table-row-actions">
+						<li class="units-table-row-action shortcut-enter" data-key-action="href">
+							<a
+								class="units-table-row-action-link"
+								href="/schedule/restore/?backup=<?= $backup ?>&type=udir&object=<?= $key ?>&token=<?= $_SESSION["token"] ?>"
+								title="<?= _("Restore") ?>"
+							>
+								<i class="fas fa-arrow-rotate-left icon-green"></i>
+								<span class="u-hide-desktop"><?= _("Restore") ?></span>
+							</a>
+						</li>
+					</ul>
 				</div>
 			</div>
 		<?php }} ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_backup_exclusions.php

@@ -25,37 +25,35 @@
 <!-- End toolbar -->
 
 <div class="container">
-	<div class="units js-units-container">
-		<div class="header units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left super-compact">&nbsp;</div>
-				<div class="clearfix l-unit__stat-col--left wide-1"><b><?= _("Type") ?></b></div>
-				<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Value") ?></b></div>
-			</div>
+
+	<div class="units-table js-units-container">
+		<div class="units-table-header">
+			<div class="units-table-cell"><?= _("Type") ?></div>
+			<div class="units-table-cell"><?= _("Value") ?></div>
 		</div>
 
 		<!-- Begin list of backup exclusions by type -->
 		<?php foreach ($data as $key => $value) { ?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left super-compact">&nbsp;</div>
-					<div class="clearfix l-unit__stat-col--left wide-1"><b><?= $key ?></b></div>
-					<div class="clearfix l-unit__stat-col--left compact u-text-right"><b>&nbsp;</b></div>
-					<div class="clearfix l-unit__stat-col--left wide-3">
-						<?php
-							if (empty($value)) {
-								echo _("No exclusions");
-							}
-							foreach ($value as $ex_key => $ex_value) {
-								echo "<b>" . $ex_key . " </b>" . $ex_value . "<br>";
-							}
-						?>
-					</div>
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
+					<span class="u-hide-desktop"><?= _("Type") ?>:</span>
+					<?= $key ?>
+				</div>
+				<div class="units-table-cell">
+					<span class="u-hide-desktop u-text-bold"><?= _("Value") ?>:</span>
+					<?php
+						if (empty($value)) {
+							echo _("No exclusions");
+						}
+						foreach ($value as $ex_key => $ex_value) {
+							echo "<span class='u-text-bold'>" . $ex_key . " </span>" . $ex_value . "<br>";
+						}
+					?>
 				</div>
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_cron.php

@@ -110,7 +110,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Command") ?>:</span>
 					<?php if ($read_only === "true" || $data[$key]["SUSPENDED"] == "yes") { ?>
 						<?= htmlspecialchars($data[$key]["CMD"], ENT_NOQUOTES) ?>

web/templates/pages/list_dns.php

@@ -122,7 +122,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
 					<a href="/list/dns/?domain=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>" title="<?= _("DNS Records") ?>: <?= htmlentities($key) ?>">
 						<?= htmlentities($key) ?>

web/templates/pages/list_firewall.php

@@ -59,6 +59,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units compact js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -154,6 +155,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_firewall_banlist.php

@@ -52,7 +52,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("IP Address") ?>:</span>
 					<?= $ip ?>
 				</div>
@@ -80,7 +80,7 @@
 					<span class="u-hide-desktop u-text-bold"><?= _("Time") ?>:</span>
 					<?= $data[$key]["TIME"] ?>
 				</div>
-				<div class="units-table-cell u-text-center-desktop u-text-bold">
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Comment") ?>:</span>
 					<?= _($value["CHAIN"]) ?>
 				</div>

web/templates/pages/list_firewall_ipset.php

@@ -50,7 +50,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("IP List Name") ?>:</span>
 					<?= $listname ?>
 				</div>

web/templates/pages/list_ip.php

@@ -55,6 +55,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -120,6 +121,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_key.php

@@ -20,6 +20,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -65,6 +66,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_log.php

@@ -70,6 +70,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -109,6 +110,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_log_auth.php

@@ -40,6 +40,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -86,6 +87,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_mail.php

@@ -173,7 +173,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
 					<a href="?domain=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Mail Accounts") ?>: <?=$key?>">
 						<?= $key ?>

web/templates/pages/list_mail_dns.php

@@ -16,103 +16,150 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 </div>
 
 <div class="container">
-	<div class="units js-units-container">
-		<div class="header units-header">
-			<div class="l-unit__col l-unit__col--right">
-				<div>
-					<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("Record") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Type") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("Priority") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center"><b><?= _("TTL") ?></b></div>
-					<div class="clearfix l-unit__stat-col--left wide-3"><b><?= _("IP or Value") ?></b></div>
-				</div>
-			</div>
+
+	<div class="units-table js-units-container">
+		<div class="units-table-header">
+			<div class="units-table-cell"><?= _("Record") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Type") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Priority") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("TTL") ?></div>
+			<div class="units-table-cell"><?= _("IP or Value") ?></div>
 		</div>
 
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left wide-3">
-					<input type="text" class="form-control" style="width:260px;" value="mail.<?= htmlspecialchars($_GET["domain"]) ?>">
-				</div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>A</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>14400</b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3">
-					<input type="text" class="form-control" style="width:400px;" value="<?= empty($ips[array_key_first($ips)]["NAT"]) ? array_key_first($ips) : $ips[array_key_first($ips)]["NAT"] ?>">
-				</div>
+		<div class="units-table-row animate__animated animate__fadeIn js-unit">
+			<div class="units-table-cell">
+				<label class="u-hide-desktop u-text-bold"><?= _("Record") ?>:</label>
+				<input type="text" class="form-control" value="mail.<?= htmlspecialchars($_GET["domain"]) ?>">
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("Type") ?>:</span>
+				A
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("Priority") ?>:</span>
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("TTL") ?>:</span>
+				14400
+			</div>
+			<div class="units-table-cell u-text-center-desktop">
+				<label class="u-hide-desktop u-text-bold"><?= _("IP or Value") ?>:</label>
+				<input type="text" class="form-control" value="<?= empty($ips[array_key_first($ips)]["NAT"]) ? array_key_first($ips) : $ips[array_key_first($ips)]["NAT"] ?>">
 			</div>
 		</div>
 		<?php if ($_SESSION["WEBMAIL_SYSTEM"]) { ?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left wide-3">
-						<input type="text" class="form-control" style="width:260px;" value="<?= $v_webmail_alias ?>.<?= htmlspecialchars($_GET["domain"]) ?>">
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>A</b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>&nbsp;</b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>14400</b></div>
-					<div class="clearfix l-unit__stat-col--left wide-3">
-						<input type="text" class="form-control" style="width:400px;" value="<?= empty($ips[array_key_first($ips)]["NAT"]) ? array_key_first($ips) : $ips[array_key_first($ips)]["NAT"] ?>">
-					</div>
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
+					<label class="u-hide-desktop u-text-bold"><?= _("Record") ?>:</label>
+					<input type="text" class="form-control" value="<?= $v_webmail_alias ?>.<?= htmlspecialchars($_GET["domain"]) ?>">
 				</div>
-			</div>
-		<?php } ?>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left wide-3">
-					<input type="text" class="form-control" style="width:260px;" value="<?= htmlspecialchars($_GET["domain"]) ?>">
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Type") ?>:</span>
+					A
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Priority") ?>:</span>
 				</div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>MX</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>10</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>14400</b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3">
-					<input type="text" class="form-control" style="width:400px;" value="mail.<?= htmlspecialchars($_GET["domain"]) ?>.">
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("TTL") ?>:</span>
+					14400
 				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<label class="u-hide-desktop u-text-bold"><?= _("IP or Value") ?>:</label>
+					<input type="text" class="form-control" value="<?= empty($ips[array_key_first($ips)]["NAT"]) ? array_key_first($ips) : $ips[array_key_first($ips)]["NAT"] ?>">
+				</div>
+			</div>
+		<?php } ?>
+		<div class="units-table-row animate__animated animate__fadeIn js-unit">
+			<div class="units-table-cell">
+				<label class="u-hide-desktop u-text-bold"><?= _("Record") ?>:</label>
+				<input type="text" class="form-control" value="<?= htmlspecialchars($_GET["domain"]) ?>">
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("Type") ?>:</span>
+				MX
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("Priority") ?>:</span>
+				10
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("TTL") ?>:</span>
+				14400
+			</div>
+			<div class="units-table-cell u-text-center-desktop">
+				<label class="u-hide-desktop u-text-bold"><?= _("IP or Value") ?>:</label>
+				<input type="text" class="form-control" value="mail.<?= htmlspecialchars($_GET["domain"]) ?>.">
 			</div>
 		</div>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left wide-3">
-					<input type="text" class="form-control" style="width:260px;" value="<?= htmlspecialchars($_GET["domain"]) ?>">
-				</div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>TXT</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>14400</b></div>
+		<div class="units-table-row animate__animated animate__fadeIn js-unit">
+			<div class="units-table-cell">
+				<label class="u-hide-desktop u-text-bold"><?= _("Record") ?>:</label>
+				<input type="text" class="form-control" value="<?= htmlspecialchars($_GET["domain"]) ?>">
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("Type") ?>:</span>
+				TXT
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("Priority") ?>:</span>
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("TTL") ?>:</span>
+				14400
+			</div>
+			<div class="units-table-cell u-text-center-desktop">
+				<label class="u-hide-desktop u-text-bold"><?= _("IP or Value") ?>:</label>
 				<?php $ip = empty($ips[array_key_first($ips)]["NAT"]) ? array_key_first($ips) : $ips[array_key_first($ips)]["NAT"]; ?>
-				<div class="clearfix l-unit__stat-col--left wide-3">
-					<input type="text" class="form-control" style="width:400px;" value="<?= htmlspecialchars("v=spf1 a mx ip4:" . $ip . " -all") ?>">
-				</div>
+				<input type="text" class="form-control" value="<?= htmlspecialchars("v=spf1 a mx ip4:" . $ip . " -all") ?>">
 			</div>
 		</div>
-		<div class="l-unit animate__animated animate__fadeIn js-unit">
-			<div class="l-unit__col l-unit__col--right">
-				<div class="clearfix l-unit__stat-col--left wide-3">
-					<input type="text" class="form-control" style="width:260px;" value="_dmarc">
-				</div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>TXT</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>&nbsp;</b></div>
-				<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>14400</b></div>
-				<div class="clearfix l-unit__stat-col--left wide-3">
-					<input type="text" class="form-control" style="width:400px;" value="<?= htmlspecialchars("v=DMARC1; p=quarantine; pct=100") ?>">
-				</div>
+		<div class="units-table-row animate__animated animate__fadeIn js-unit">
+			<div class="units-table-cell">
+				<label class="u-hide-desktop u-text-bold"><?= _("Record") ?>:</label>
+				<input type="text" class="form-control" value="_dmarc">
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("Type") ?>:</span>
+				TXT
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("Priority") ?>:</span>
+			</div>
+			<div class="units-table-cell u-text-bold u-text-center-desktop">
+				<span class="u-hide-desktop"><?= _("TTL") ?>:</span>
+				14400
+			</div>
+			<div class="units-table-cell u-text-center-desktop">
+				<label class="u-hide-desktop u-text-bold"><?= _("IP or Value") ?>:</label>
+				<input type="text" class="form-control" value="<?= htmlspecialchars("v=DMARC1; p=quarantine; pct=100") ?>">
 			</div>
 		</div>
 		<?php foreach ($dkim as $key => $value) { ?>
-			<div class="l-unit animate__animated animate__fadeIn js-unit">
-				<div class="l-unit__col l-unit__col--right">
-					<div class="clearfix l-unit__stat-col--left wide-3">
-						<input type="text" class="form-control" style="width:260px;" value="<?= htmlspecialchars($key) ?>">
-					</div>
-					<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>TXT</b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>&nbsp;</b></div>
-					<div class="clearfix l-unit__stat-col--left u-text-center u-pt10"><b>3600</b></div>
-					<div class="clearfix l-unit__stat-col--left wide-3">
-						<input type="text" class="form-control" style="width:400px;" value="<?= htmlspecialchars(str_replace(['"', "'"], "", $dkim[$key]["TXT"])) ?>">
-					</div>
+			<div class="units-table-row animate__animated animate__fadeIn js-unit">
+				<div class="units-table-cell">
+					<label class="u-hide-desktop u-text-bold"><?= _("Record") ?>:</label>
+					<input type="text" class="form-control" value="<?= htmlspecialchars($key) ?>">
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Type") ?>:</span>
+					TXT
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("Priority") ?>:</span>
+				</div>
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
+					<span class="u-hide-desktop"><?= _("TTL") ?>:</span>
+					3600
+				</div>
+				<div class="units-table-cell u-text-center-desktop">
+					<label class="u-hide-desktop u-text-bold"><?= _("IP or Value") ?>:</label>
+					<input type="text" class="form-control" value="<?= htmlspecialchars(str_replace(['"', "'"], "", $dkim[$key]["TXT"])) ?>">
 				</div>
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_search.php

@@ -41,6 +41,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -180,6 +181,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_server_preview.php

@@ -11,6 +11,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -20,7 +21,7 @@
 				<div class="clearfix l-unit__stat-col--left wide-2"><b><?= _("Status") ?></b></div>
 			</div>
 		</div>
-		<!-- Start of item element-->
+
 		<div class="l-unit header animate__animated animate__fadeIn js-unit">
 			<div class="l-unit__col l-unit__col--right">
 				<div class="clearfix l-unit__stat-col--left super-compact u-text-center">
@@ -31,8 +32,8 @@
 				<div class="clearfix l-unit__stat-col--left wide-2"><?= _("Partially implemented") ?></div>
 			</div>
 		</div>
-		<!-- End of item element-->
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_services.php

@@ -181,6 +181,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_updates.php

@@ -25,6 +25,7 @@
 <!-- End toolbar -->
 
 <div class="container">
+
 	<div class="units js-units-container">
 		<div class="header units-header">
 			<div class="l-unit__col l-unit__col--right">
@@ -77,6 +78,7 @@
 			</div>
 		<?php } ?>
 	</div>
+
 </div>
 
 <footer class="app-footer">

web/templates/pages/list_user.php

@@ -139,7 +139,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell units-table-heading-cell">
 					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
 					<?php if ($key == $user_plain) { ?>
 						<a href="/edit/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>" title="<?= _("Edit User") ?>">

web/templates/pages/list_web.php

@@ -193,7 +193,7 @@
 						<label for="check<?= $i ?>" class="u-hide-desktop"><?= _("Select") ?></label>
 					</div>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell units-table-heading-cell u-text-bold">
 					<span class="u-hide-desktop"><?= _("Name") ?>:</span>
 					<?php if ($read_only === 'true') { ?>
 						<?= $key ?>