ソースを参照

Refactor .units-table cell centering (#3659)

Alec Rust 2 年 前
コミット
cb95e94def

+ 0 - 5
web/css/src/themes/default.css

@@ -986,11 +986,6 @@
 			padding-top: 10px;
 			padding-bottom: 10px;
 		}
-
-		/* Metadata cells */
-		&:not(:nth-child(1), :nth-child(2)) {
-			text-align: center;
-		}
 	}
 }
 

+ 6 - 0
web/css/src/utilities.css

@@ -41,6 +41,12 @@
 	text-align: center !important;
 }
 
+.u-text-center-desktop {
+	@media (--viewport-large) {
+		text-align: center !important;
+	}
+}
+
 .u-text-small {
 	font-size: 0.75rem !important;
 }

+ 6 - 6
web/templates/pages/list_access_keys.php

@@ -53,9 +53,9 @@
 			</div>
 			<div class="units-table-cell"><?= _("Access Key") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("Comment") ?></div>
-			<div class="units-table-cell"><?= _("Date") ?></div>
-			<div class="units-table-cell"><?= _("Time") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Comment") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Date") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Time") ?></div>
 		</div>
 
 		<?php
@@ -100,15 +100,15 @@
 						</li>
 					</ul>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Comment") ?>:</span>
 					<?= _($key_comment) ?>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Date") ?>:</span>
 					<time datetime="<?= $key_date ?>"><?= $key_date ?></time>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Time") ?>:</span>
 					<?= $key_time ?>
 				</div>

+ 8 - 8
web/templates/pages/list_backup.php

@@ -43,10 +43,10 @@
 			</div>
 			<div class="units-table-cell"><?= _("File Name") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("Date") ?></div>
-			<div class="units-table-cell"><?= _("Size") ?></div>
-			<div class="units-table-cell"><?= _("Type") ?></div>
-			<div class="units-table-cell"><?= _("Runtime") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Date") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Size") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Type") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Runtime") ?></div>
 		</div>
 
 		<!-- Begin user backup list item loop -->
@@ -124,13 +124,13 @@
 						</ul>
 					<?php } ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Date") ?>:</span>
 					<span class="u-text-bold">
 						<?= translate_date($data[$key]["DATE"]) ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Size") ?>:</span>
 					<span class="u-text-bold">
 						<?= humanize_usage_size($data[$key]["SIZE"]) ?>
@@ -139,11 +139,11 @@
 						<?= humanize_usage_measure($data[$key]["SIZE"]) ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Type") ?>:</span>
 					<?= $data[$key]["TYPE"] ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Runtime") ?>:</span>
 					<?= humanize_time($data[$key]["RUNTIME"]) ?>
 				</div>

+ 10 - 10
web/templates/pages/list_cron.php

@@ -74,11 +74,11 @@
 			</div>
 			<div class="units-table-cell"><?= _("Command") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("Minute") ?></div>
-			<div class="units-table-cell"><?= _("Hour") ?></div>
-			<div class="units-table-cell"><?= _("Day") ?></div>
-			<div class="units-table-cell"><?= _("Month") ?></div>
-			<div class="units-table-cell"><?= _("Day of Week") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Minute") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Hour") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Day") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Month") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Day of Week") ?></div>
 		</div>
 
 		<!-- Begin cron job list item loop -->
@@ -162,23 +162,23 @@
 						</ul>
 					<?php } ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Minute") ?>:</span>
 					<?= $data[$key]["MIN"] ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Hour") ?>:</span>
 					<?= $data[$key]["HOUR"] ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Day") ?>:</span>
 					<?= $data[$key]["DAY"] ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Month") ?>:</span>
 					<?= $data[$key]["MONTH"] ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Day of Week") ?>:</span>
 					<?= $data[$key]["WDAY"] ?>
 				</div>

+ 12 - 12
web/templates/pages/list_dns.php

@@ -75,12 +75,12 @@
 			</div>
 			<div class="units-table-cell"><?= _("Name") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("Records") ?></div>
-			<div class="units-table-cell"><?= _("Template") ?></div>
-			<div class="units-table-cell"><?= _("TTL") ?></div>
-			<div class="units-table-cell"><?= _("SOA") ?></div>
-			<div class="units-table-cell"><?= _("DNSSEC") ?></div>
-			<div class="units-table-cell"><?= _("Expiration Date") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Records") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Template") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("TTL") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("SOA") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("DNSSEC") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Expiration Date") ?></div>
 		</div>
 
 		<!-- Begin DNS zone list item loop -->
@@ -203,7 +203,7 @@
 						</ul>
 					<?php } ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Records") ?>:</span>
 					<?php if ($data[$key]['RECORDS']) {
 						echo '<span>'.$data[$key]['RECORDS'].'</span>';
@@ -211,25 +211,25 @@
 						echo '<span>0</span>';
 					} ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Template") ?>:</span>
 					<span class="u-text-bold">
 						<?= $data[$key]["TPL"] ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("TTL") ?>:</span>
 					<?= $data[$key]["TTL"] ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("SOA") ?>:</span>
 					<?= $data[$key]["SOA"] ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("DNSSEC") ?>:</span>
 					<i class="fas <?= $dnssec_icon ?>" title="<?= $dnssec_title ?>"></i>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Expiration Date") ?>:</span>
 					<time class="u-text-bold" datetime="<?= $data[$key]["EXP"] ?>">
 						<?= $data[$key]["EXP"] ?>

+ 6 - 6
web/templates/pages/list_firewall_banlist.php

@@ -34,9 +34,9 @@
 			</div>
 			<div class="units-table-cell"><?= _("IP Address") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("Date") ?></div>
-			<div class="units-table-cell"><?= _("Time") ?></div>
-			<div class="units-table-cell"><?= _("Comment") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Date") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Time") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Comment") ?></div>
 		</div>
 
 		<!-- Begin banned IP address list item loop -->
@@ -72,15 +72,15 @@
 						</li>
 					</ul>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Date") ?>:</span>
 					<time datetime="<?= _($data[$key]["DATE"]) ?>"><?= _($data[$key]["DATE"]) ?></time>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Time") ?>:</span>
 					<?= $data[$key]["TIME"] ?>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell u-text-center-desktop u-text-bold">
 					<span class="u-hide-desktop"><?= _("Comment") ?>:</span>
 					<?= _($value["CHAIN"]) ?>
 				</div>

+ 8 - 8
web/templates/pages/list_firewall_ipset.php

@@ -34,10 +34,10 @@
 			</div>
 			<div class="units-table-cell"><?= _("IP List Name") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("Auto Update") ?></div>
-			<div class="units-table-cell"><?= _("IP Version") ?></div>
-			<div class="units-table-cell"><?= _("Date") ?></div>
-			<div class="units-table-cell"><?= _("Time") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Auto Update") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("IP Version") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Date") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Time") ?></div>
 		</div>
 
 		<!-- Begin firewall IP address list item loop -->
@@ -70,7 +70,7 @@
 						</li>
 					</ul>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Auto Update") ?>:</span>
 					<?php if ($data[$key]["AUTOUPDATE"] == "no") { ?>
 						<i class="fas fa-circle-xmark icon-red" title="<?= _("Disabled") ?>"></i>
@@ -78,15 +78,15 @@
 						<i class="fas fa-circle-check icon-green" title="<?= _("Enabled") ?>"></i>
 					<?php } ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("IP Version") ?>:</span>
 					<?= _($data[$key]["IP_VERSION"]) ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Date") ?>:</span>
 					<time datetime="<?= _($data[$key]["DATE"]) ?>"><?= _($data[$key]["DATE"]) ?></time>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Time") ?>:</span>
 					<?= $data[$key]["TIME"] ?>
 				</div>

+ 12 - 12
web/templates/pages/list_mail.php

@@ -72,12 +72,12 @@
 			</div>
 			<div class="units-table-cell"><?= _("Name") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("Accounts") ?></div>
-			<div class="units-table-cell"><?= _("Disk") ?></div>
-			<div class="units-table-cell"><?= _("Anti-Virus") ?></div>
-			<div class="units-table-cell"><?= _("Spam Filter") ?></div>
-			<div class="units-table-cell"><?= _("DKIM") ?></div>
-			<div class="units-table-cell"><?= _("SSL") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Accounts") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Disk") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Anti-Virus") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Spam Filter") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("DKIM") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("SSL") ?></div>
 		</div>
 
 		<!-- Begin mail domain list item loop -->
@@ -290,7 +290,7 @@
 						<?php } ?>
 					</ul>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Accounts") ?>:</span>
 					<?php
 						if ($data[$key]['ACCOUNTS']) {
@@ -301,7 +301,7 @@
 					?>
 					<?= $mail_accounts ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Disk") ?>:</span>
 					<span class="u-text-bold">
 						<?= humanize_usage_size($data[$key]['U_DISK']) ?>
@@ -310,19 +310,19 @@
 						<?= humanize_usage_measure($data[$key]['U_DISK']) ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Anti-Virus") ?>:</span>
 					<i class="fas <?= $antivirus_icon ?>" title="<?= $antivirus_title ?>"></i>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Spam Filter") ?>:</span>
 					<i class="fas <?= $antispam_icon ?>" title="<?= $antispam_title ?>"></i>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("DKIM") ?>:</span>
 					<i class="fas <?= $dkim_icon ?>" title="<?= $dkim_title ?>"></i>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("SSL") ?>:</span>
 					<i class="fas <?= $ssl_icon ?>" title="<?= $ssl_title ?>"></i>
 				</div>

+ 18 - 18
web/templates/pages/list_user.php

@@ -76,33 +76,33 @@
 			</div>
 			<div class="units-table-cell"><?= _("Name") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("Package") ?></div>
-			<div class="units-table-cell"><?= _("IPs") ?></div>
-			<div class="units-table-cell">
+			<div class="units-table-cell u-text-center"><?= _("Package") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("IPs") ?></div>
+			<div class="units-table-cell u-text-center">
 				<i class="fas fa-hard-drive" title="<?= _("Disk") ?>"></i>
 				<span class="u-hidden-visually"><?= _("Disk") ?></span>
 			</div>
-			<div class="units-table-cell">
+			<div class="units-table-cell u-text-center">
 				<i class="fas fa-right-left" title="<?= _("Bandwidth") ?>"></i>
 				<span class="u-hidden-visually"><?= _("Bandwidth") ?></span>
 			</div>
-			<div class="units-table-cell">
+			<div class="units-table-cell u-text-center">
 				<i class="fas fa-earth-americas" title="<?= _("Web Domains") ?>"></i>
 				<span class="u-hidden-visually"><?= _("Web Domains") ?></span>
 			</div>
-			<div class="units-table-cell">
+			<div class="units-table-cell u-text-center">
 				<i class="fas fa-book-atlas" title="<?= _("DNS Zones") ?>"></i>
 				<span class="u-hidden-visually"><?= _("DNS Zones") ?></span>
 			</div>
-			<div class="units-table-cell">
+			<div class="units-table-cell u-text-center">
 				<i class="fas fa-envelopes-bulk" title="<?= _("Mail Domains") ?>"></i>
 				<span class="u-hidden-visually"><?= _("Mail Domains") ?></span>
 			</div>
-			<div class="units-table-cell">
+			<div class="units-table-cell u-text-center">
 				<i class="fas fa-database" title="<?= _("Databases") ?>"></i>
 				<span class="u-hidden-visually"><?= _("Databases") ?></span>
 			</div>
-			<div class="units-table-cell">
+			<div class="units-table-cell u-text-center">
 				<i class="fas fa-file-zipper" title="<?= _("Backups") ?>"></i>
 				<span class="u-hidden-visually"><?= _("Backups") ?></span>
 			</div>
@@ -220,7 +220,7 @@
 						<?php } ?>
 					</ul>
 				</div>
-				<div class="units-table-cell u-text-bold">
+				<div class="units-table-cell u-text-bold u-text-center-desktop">
 					<span class="u-hide-desktop"><?= _("Package") ?>:</span>
 					<?php if ($data[$key]["PACKAGE"] === "system") { ?>
 						<?= $data[$key]["PACKAGE"] ?>
@@ -230,11 +230,11 @@
 						</a>
 					<?php } ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("IPs") ?>:</span>
 					<?= $data[$key]["IP_OWNED"] ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Disk") ?>:</span>
 					<span class="u-text-bold">
 						<?= humanize_usage_size($data[$key]["U_DISK"], 1) ?>
@@ -249,7 +249,7 @@
 						<?= humanize_usage_measure($data[$key]["DISK_QUOTA"]) ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Bandwidth") ?>:</span>
 					<span class="u-text-bold">
 						<?= humanize_usage_size($data[$key]["U_BANDWIDTH"], 1) ?>
@@ -264,31 +264,31 @@
 						<?= humanize_usage_measure($data[$key]["BANDWIDTH"]) ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Web Domains") ?>:</span>
 					<span class="badge">
 						<?= $data[$key]["U_WEB_DOMAINS"] ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("DNS Zones") ?>:</span>
 					<span class="badge">
 						<?= $data[$key]["U_DNS_DOMAINS"] ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Mail Domains") ?>:</span>
 					<span class="badge">
 						<?= $data[$key]["U_MAIL_DOMAINS"] ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Databases") ?>:</span>
 					<span class="badge">
 						<?= $data[$key]["U_DATABASES"] ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Backups") ?>:</span>
 					<span class="badge">
 						<?= $data[$key]["U_BACKUPS"] ?>

+ 10 - 10
web/templates/pages/list_web.php

@@ -75,11 +75,11 @@
 			</div>
 			<div class="units-table-cell"><?= _("Name") ?></div>
 			<div class="units-table-cell"></div>
-			<div class="units-table-cell"><?= _("IP Address") ?></div>
-			<div class="units-table-cell"><?= _("Disk") ?></div>
-			<div class="units-table-cell"><?= _("Bandwidth") ?></div>
-			<div class="units-table-cell"><?= _("SSL") ?></div>
-			<div class="units-table-cell"><?= _("Statistics") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("IP Address") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Disk") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Bandwidth") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("SSL") ?></div>
+			<div class="units-table-cell u-text-center"><?= _("Statistics") ?></div>
 		</div>
 
 		<!-- Begin web domain list item loop -->
@@ -295,11 +295,11 @@
 						<?php } ?>
 					</ul>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("IP Address") ?>:</span>
 					<?= empty($ips[$data[$key]['IP']]['NAT']) ? $data[$key]['IP'] : "{$ips[$data[$key]['IP']]['NAT']}"; ?>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Disk") ?>:</span>
 					<span class="u-text-bold">
 						<?= humanize_usage_size($data[$key]['U_DISK']) ?>
@@ -308,7 +308,7 @@
 						<?= humanize_usage_measure($data[$key]['U_DISK']) ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Bandwidth") ?>:</span>
 					<span class="u-text-bold">
 						<?= humanize_usage_size($data[$key]['U_BANDWIDTH']) ?>
@@ -317,11 +317,11 @@
 						<?= humanize_usage_measure($data[$key]['U_BANDWIDTH']) ?>
 					</span>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("SSL") ?>:</span>
 					<i class="fas <?= $icon_ssl ?>" title="<?= $title_ssl ?>"></i>
 				</div>
-				<div class="units-table-cell">
+				<div class="units-table-cell u-text-center-desktop">
 					<span class="u-hide-desktop u-text-bold"><?= _("Statistics") ?>:</span>
 					<i class="fas <?= $icon_webstats ?>" title="<?= $title_webstats ?>"></i>
 				</div>