Small fix for small screens in the logs header (#4126)

* Update default.css

Adding overflow-x:scroll; to the logs on smaller screens to fix the header, which goes out of the screen currently on mobile devices.

* Run pretier format

And fix CSS bug

---------

Co-authored-by: Jaap Marcus <9754650+jaapmarcus@users.noreply.github.com>

install/common/firewall/ipset/blacklist.sh

@@ -5,16 +5,16 @@
 #
 
 BLACKLISTS=(
-	"https://www.projecthoneypot.org/list_of_ips.php?t=d&rss=1"                                # Project Honey Pot Directory of Dictionary Attacker IPs
-	"https://check.torproject.org/cgi-bin/TorBulkExitList.py?ip=1.1.1.1"                       # TOR Exit Nodes
-	"https://www.maxmind.com/en/high-risk-ip-sample-list"                                      # MaxMind GeoIP Anonymous Proxies
-	"https://danger.rulez.sk/projects/bruteforceblocker/blist.php"                             # BruteForceBlocker IP List
-	"https://www.spamhaus.org/drop/drop.lasso"                                                 # Spamhaus Don't Route Or Peer List (DROP)
-	"https://cinsscore.com/list/ci-badguys.txt"                                                # C.I. Army Malicious IP List
-	"https://lists.blocklist.de/lists/all.txt"                                                 # blocklist.de attackers
-	"https://blocklist.greensnow.co/greensnow.txt"                                             # GreenSnow
-	"https://iplists.firehol.org/files/firehol_level1.netset"  # Firehol Level 1
-	"https://iplists.firehol.org/files/stopforumspam_7d.ipset" # Stopforumspam via Firehol
+	"https://www.projecthoneypot.org/list_of_ips.php?t=d&rss=1"          # Project Honey Pot Directory of Dictionary Attacker IPs
+	"https://check.torproject.org/cgi-bin/TorBulkExitList.py?ip=1.1.1.1" # TOR Exit Nodes
+	"https://www.maxmind.com/en/high-risk-ip-sample-list"                # MaxMind GeoIP Anonymous Proxies
+	"https://danger.rulez.sk/projects/bruteforceblocker/blist.php"       # BruteForceBlocker IP List
+	"https://www.spamhaus.org/drop/drop.lasso"                           # Spamhaus Don't Route Or Peer List (DROP)
+	"https://cinsscore.com/list/ci-badguys.txt"                          # C.I. Army Malicious IP List
+	"https://lists.blocklist.de/lists/all.txt"                           # blocklist.de attackers
+	"https://blocklist.greensnow.co/greensnow.txt"                       # GreenSnow
+	"https://iplists.firehol.org/files/firehol_level1.netset"            # Firehol Level 1
+	"https://iplists.firehol.org/files/stopforumspam_7d.ipset"           # Stopforumspam via Firehol
 )
 
 IP_BLACKLIST_TMP=$(mktemp)

install/upgrade/versions/1.8.8.sh

@@ -30,22 +30,22 @@ hestia_conf="$HESTIA/conf/hestia.conf"
 hestia_defaults_conf="$HESTIA/conf/defaults/hestia.conf"
 
 for i in POLICY_USER_CHANGE_THEME POLICY_USER_EDIT_WEB_TEMPLATES POLICY_USER_VIEW_LOGS; do
-        if [[ -f "$hestia_conf" ]]; then
-                if grep "$i" "$hestia_conf" | grep -q 'true'; then
-                        if "$BIN/v-change-sys-config-value" "$i" 'yes'; then
-                                echo "[ * ] Success: ${i} value changed from true to yes in hestia.conf"
-                        else
-                                echo "[ ! ] Error: Couldn't change ${i} value from true to yes in hestia.conf"
-                        fi
-                fi
-        fi
-        if [[ -f "$hestia_defaults_conf" ]]; then
-                if grep "$i" "$hestia_defaults_conf" | grep -q 'true'; then
-                        if sed -i "s/${i}='true'/${i}='yes'/" "$hestia_defaults_conf"; then
-                                echo "[ * ] Success: ${i} value changed from true to yes in defaults/hestia.conf"
-                        else
-                                echo "[ ! ] Error: Couldn't change ${i} value from true to yes in defaults/hestia.conf"
-                        fi
-                fi
-        fi
+	if [[ -f "$hestia_conf" ]]; then
+		if grep "$i" "$hestia_conf" | grep -q 'true'; then
+			if "$BIN/v-change-sys-config-value" "$i" 'yes'; then
+				echo "[ * ] Success: ${i} value changed from true to yes in hestia.conf"
+			else
+				echo "[ ! ] Error: Couldn't change ${i} value from true to yes in hestia.conf"
+			fi
+		fi
+	fi
+	if [[ -f "$hestia_defaults_conf" ]]; then
+		if grep "$i" "$hestia_defaults_conf" | grep -q 'true'; then
+			if sed -i "s/${i}='true'/${i}='yes'/" "$hestia_defaults_conf"; then
+				echo "[ * ] Success: ${i} value changed from true to yes in defaults/hestia.conf"
+			else
+				echo "[ ! ] Error: Couldn't change ${i} value from true to yes in defaults/hestia.conf"
+			fi
+		fi
+	fi
 done

web/css/src/themes/default.css

@@ -398,7 +398,9 @@
 			rgb(255 255 255 / 60%) 30%,
 			rgb(255 255 255 / 95%) 95%
 		);
-		box-shadow: inset 0 0 1px #fff, inset -1px -1px 4px rgb(220 220 220 / 40%);
+		box-shadow:
+			inset 0 0 1px #fff,
+			inset -1px -1px 4px rgb(220 220 220 / 40%);
 	}
 
 	&.active {
@@ -776,7 +778,9 @@
 				rgb(190 221 246 / 100%) 51%,
 				rgb(227 240 251 / 100%) 100%
 			);
-			box-shadow: inset 0 0 1px #fff, inset 0 0 6px rgb(255 255 255 / 60%);
+			box-shadow:
+				inset 0 0 1px #fff,
+				inset 0 0 6px rgb(255 255 255 / 60%);
 		}
 
 		&:active,
@@ -790,7 +794,9 @@
 			);
 			color: #046c98;
 			text-shadow: 0 -1px 1px rgb(255 255 255 / 50%);
-			box-shadow: inset 0 0 1px #fff, inset -1px -1px 4px rgb(220 220 220 / 40%);
+			box-shadow:
+				inset 0 0 1px #fff,
+				inset -1px -1px 4px rgb(220 220 220 / 40%);
 		}
 	}
 
@@ -806,7 +812,9 @@
 	border-left: 0;
 	background-color: rgb(255 255 255 / 90%);
 	border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
-	box-shadow: inset 0 0 1px rgb(41 90 152 / 10%), inset 0 0 2px rgb(255 255 255 / 100%);
+	box-shadow:
+		inset 0 0 1px rgb(41 90 152 / 10%),
+		inset 0 0 2px rgb(255 255 255 / 100%);
 	text-shadow: 1px 1px rgb(255 255 255 / 90%);
 	color: #069;
 	min-width: 32px;
@@ -927,8 +935,11 @@
 			rgb(247 247 247 / 100%) 0%,
 			rgb(255 255 255 / 100%) 100%
 		);
-		box-shadow: inset 0 1px 1px rgb(255 255 255 / 100%), inset 0 0 1px rgb(255 255 255 / 100%),
-			inset 0 0 4px rgb(255 255 255 / 80%), 0 1px 4px rgb(140 140 140 / 35%);
+		box-shadow:
+			inset 0 1px 1px rgb(255 255 255 / 100%),
+			inset 0 0 1px rgb(255 255 255 / 100%),
+			inset 0 0 4px rgb(255 255 255 / 80%),
+			0 1px 4px rgb(140 140 140 / 35%);
 
 		& .units-table-cell {
 			font-weight: bold;
@@ -1116,7 +1127,9 @@
 		border-radius: 13px;
 		font-weight: 700;
 		font-size: 0.75rem;
-		box-shadow: 0 1px 2px rgb(70 70 70 / 50%), inset 0 2px 2px #fff;
+		box-shadow:
+			0 1px 2px rgb(70 70 70 / 50%),
+			inset 0 2px 2px #fff;
 		color: #6c6c6c;
 		padding-left: 4px;
 		padding-right: 4px;
@@ -1693,7 +1706,9 @@
 	background-color: #f0efef;
 	border: 1px solid rgb(255 255 255 / 98%);
 	border-radius: var(--border-radius-base);
-	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
+	box-shadow:
+		inset 0 1px 3px rgb(0 0 0 / 25%),
+		0 8px 40px 0 rgb(0 0 0 / 35%);
 
 	@media (--viewport-small) {
 		min-width: 360px;
@@ -1811,7 +1826,10 @@
 			rgb(223 235 245 / 100%) 100%
 		),
 		#3b9de8;
-	box-shadow: 0 1px 3px rgb(0 0 0 / 25%), inset 0 0 1px #fff, inset 0 0 3px rgb(255 255 255 / 50%);
+	box-shadow:
+		0 1px 3px rgb(0 0 0 / 25%),
+		inset 0 0 1px #fff,
+		inset 0 0 3px rgb(255 255 255 / 50%);
 
 	&:hover {
 		color: #0077c6;
@@ -1823,7 +1841,10 @@
 			rgb(190 221 246 / 100%) 51%,
 			rgb(227 240 251 / 100%) 100%
 		);
-		box-shadow: 0 1px 3px rgb(0 0 0 / 25%), inset 0 0 1px #fff, inset 0 0 6px rgb(255 255 255 / 60%);
+		box-shadow:
+			0 1px 3px rgb(0 0 0 / 25%),
+			inset 0 0 1px #fff,
+			inset 0 0 6px rgb(255 255 255 / 60%);
 	}
 
 	&:active {
@@ -1836,7 +1857,9 @@
 			rgb(162 207 244 / 100%) 51%,
 			rgb(210 232 250 / 100%) 100%
 		);
-		box-shadow: 0 1px 2px rgb(0 0 0 / 20%), inset 0 0 1px #fff,
+		box-shadow:
+			0 1px 2px rgb(0 0 0 / 20%),
+			inset 0 0 1px #fff,
 			inset -1px -1px 4px rgb(220 220 220 / 40%);
 	}
 
@@ -1867,7 +1890,9 @@
 	&:active {
 		background: linear-gradient(to bottom, #fcd0ca 0%, #f5a69d 50%, #f9e3df 100%);
 		color: #ce1500;
-		text-shadow: 0 1px 1px rgb(255 255 255 / 20%), 0 -1px 1px rgb(255 255 255 / 60%);
+		text-shadow:
+			0 1px 1px rgb(255 255 255 / 20%),
+			0 -1px 1px rgb(255 255 255 / 60%);
 		border-color: #f4301a;
 	}
 }
@@ -2027,7 +2052,9 @@
 	background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
 	border: 1px solid #ddd;
 	text-shadow: 0 1px rgb(255 255 255 / 95%);
-	box-shadow: inset 0 0 1px rgb(255 255 255 / 100%), inset 0 0 4px rgb(255 255 255 / 80%),
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 100%),
+		inset 0 0 4px rgb(255 255 255 / 80%),
 		0 4px 6px rgb(190 190 190 / 40%);
 	font-weight: 600;
 	color: var(--color-text-link);
@@ -2100,7 +2127,9 @@
 	@media (--viewport-small) {
 		border-radius: 6px;
 		background-color: rgb(255 255 255 / 70%);
-		box-shadow: 0 8px 25px rgb(0 0 0 / 30%), inset 0 0 2px rgb(255 255 255 / 100%);
+		box-shadow:
+			0 8px 25px rgb(0 0 0 / 30%),
+			inset 0 0 2px rgb(255 255 255 / 100%);
 		padding: 70px 50px;
 		max-width: 370px;
 
@@ -2185,6 +2214,11 @@
 	font-size: 0.92rem;
 	line-height: 1.15;
 	padding-bottom: 20px;
+	overflow-x: scroll;
+
+	@media (--viewport-medium) {
+		overflow-x: initial;
+	}
 }
 
 /* Icon component

web/inc/main.php

@@ -343,7 +343,7 @@ function humanize_usage_size($usage, $round = 2) {
 	}
 	if ($usage < 1) {
 		$usage = "0";
-	}	
+	}
 	$display_usage = $usage;
 	if ($usage > 1024) {
 		$usage = $usage / 1024;