From b64ebb374df92ffa7f04e39269d902de8ab76aa5 Mon Sep 17 00:00:00 2001
From: Alex <40072887+alexdcrane@users.noreply.github.com>
Date: Wed, 6 Aug 2025 16:01:09 -0700
Subject: [PATCH] Dashboard - Use a class to determine the row span (#7451)

* Dashboard - Use a class to determine the row span

* Update parent.php

* Update icon.php

* Update content.php

* Update domains.php

* Update dashboard_edit.php

* Update missed_calls.php

* Update recent_calls.php

* Update voicemails.php

* Update system_counts.php

* Update system_cpu_status.php

* Update system_disk_usage.php

* Update system_services.php

* Update system_status.php

* Update system_services.php

* Update switch_status.php

* Update registrations.php

* Update ring_group_forward.php

* Update caller_id.php

* Update domain_limits.php

* Update call_forward.php

* Update active_calls.php
---
 .../resources/dashboard/active_calls.php      |   2 +-
 .../resources/dashboard/call_forward.php      |   4 +-
 .../resources/dashboard/domain_limits.php     |   4 +-
 .../resources/dashboard/caller_id.php         |   4 +-
 .../resources/dashboard/registrations.php     |   2 +-
 .../dashboard/ring_group_forward.php          |   4 +-
 .../resources/dashboard/switch_status.php     |   6 +-
 .../resources/dashboard/system_counts.php     |   4 +-
 .../resources/dashboard/system_cpu_status.php |   4 +-
 .../resources/dashboard/system_disk_usage.php |   4 +-
 .../resources/dashboard/system_services.php   |   3 +-
 .../resources/dashboard/system_status.php     |   4 +-
 .../resources/dashboard/voicemails.php        |   4 +-
 .../resources/dashboard/missed_calls.php      |   4 +-
 .../resources/dashboard/recent_calls.php      |   4 +-
 core/dashboard/dashboard_edit.php             |   2 +-
 core/dashboard/index.php                      | 163 +++++++++++-------
 .../dashboard/resources/dashboard/content.php |   2 +-
 core/dashboard/resources/dashboard/icon.php   |   2 +-
 core/dashboard/resources/dashboard/parent.php | 124 ++++++++-----
 core/domains/resources/dashboard/domains.php  |   2 +-
 21 files changed, 217 insertions(+), 135 deletions(-)

diff --git a/app/active_calls/resources/dashboard/active_calls.php b/app/active_calls/resources/dashboard/active_calls.php
index f2d176a22e..f8369362e3 100644
--- a/app/active_calls/resources/dashboard/active_calls.php
+++ b/app/active_calls/resources/dashboard/active_calls.php
@@ -68,7 +68,7 @@ $row_style["0"] = "row_style0";
 $row_style["1"] = "row_style1";
 
 //icon and count
-echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_active_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."')\"").">\n";
+echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_active_calls_details').slideToggle('fast');\"").">\n";
 	echo "<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/active_calls/active_calls.php'\">".$text['title']."</a></span>\n";
 	echo "<div style='position: relative; display: inline-block;'>\n";
 		echo "<span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
diff --git a/app/call_forward/resources/dashboard/call_forward.php b/app/call_forward/resources/dashboard/call_forward.php
index 989f763919..2204dc5307 100644
--- a/app/call_forward/resources/dashboard/call_forward.php
+++ b/app/call_forward/resources/dashboard/call_forward.php
@@ -102,7 +102,7 @@
 //begin widget
 	echo "<div class='hud_box'>\n";
 
-	echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_call_forward_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+	echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_call_forward_details').slideToggle('fast');\"").">\n";
 	echo "		<span class='hud_title'>".$text['header-call_forward']."</span>\n";
 
 //doughnut chart
@@ -248,7 +248,7 @@
 		echo "</div>";
 		//$n++;
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_call_forward_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>\n";
+		echo "<span class='hud_expander' onclick=\"$('#hud_call_forward_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>\n";
 	}
 	echo "</div>\n";
 
diff --git a/app/domain_limits/resources/dashboard/domain_limits.php b/app/domain_limits/resources/dashboard/domain_limits.php
index 5949378bf7..0fbcffc813 100644
--- a/app/domain_limits/resources/dashboard/domain_limits.php
+++ b/app/domain_limits/resources/dashboard/domain_limits.php
@@ -110,7 +110,7 @@
 				$hud_stat_title = $text['label-destinations'];
 			}
 
-			echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_domain_limits_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+			echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_domain_limits_details').slideToggle('fast');\"").">\n";
 			echo "		<span class='hud_title'>".$text['label-domain_limits']."</span>\n";
 
 		//doughnut chart
@@ -240,7 +240,7 @@
 				echo "</div>";
 				//$n++;
 
-				echo "<span class='hud_expander' onclick=\"$('#hud_domain_limits_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+				echo "<span class='hud_expander' onclick=\"$('#hud_domain_limits_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 			}
 			echo "</div>\n";
 	}
diff --git a/app/extensions/resources/dashboard/caller_id.php b/app/extensions/resources/dashboard/caller_id.php
index f7b5133e52..c11ebaa778 100644
--- a/app/extensions/resources/dashboard/caller_id.php
+++ b/app/extensions/resources/dashboard/caller_id.php
@@ -172,7 +172,7 @@
 		//caller id
 			echo "<div class='hud_box'>\n";
 
-			echo "	<div class='hud_content'  ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_caller_id_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+			echo "	<div class='hud_content'  ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_caller_id_details').slideToggle('fast');\"").">\n";
 			echo "		<span class='hud_title'>".$text['label-caller_id_number']."</span>\n";
 
 		//doughnut chart
@@ -310,7 +310,7 @@
 				echo "<input type='hidden' name='".$token['name']."' value='".$token['hash']."'>\n";
 				echo "</form>\n";
 
-				echo "<span class='hud_expander' onclick=\"$('#hud_caller_id_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+				echo "<span class='hud_expander' onclick=\"$('#hud_caller_id_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 			}
 			echo "</div>\n";
 
diff --git a/app/registrations/resources/dashboard/registrations.php b/app/registrations/resources/dashboard/registrations.php
index 1c03b40e69..1541fe1402 100644
--- a/app/registrations/resources/dashboard/registrations.php
+++ b/app/registrations/resources/dashboard/registrations.php
@@ -51,7 +51,7 @@
 
 //dashboard icon
 	echo "<div class='hud_box'>\n";
-	echo "	<div class='hud_content' ".(empty($dashboard_details_state) || $dashboard_details_state != "disabled" ? "onclick=\"$('#hud_icon_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"" : null).">\n";
+	echo "	<div class='hud_content' ".(empty($dashboard_details_state) || $dashboard_details_state != "disabled" ? "onclick=\"$('#hud_icon_details').slideToggle('fast');\"" : null).">\n";
 	echo "		<span class='hud_title' onclick=\"window.open('".$dashboard_url."', '".$dashboard_target."', '".$window_parameters."')\">".escape($dashboard_label)."</span>";
 	echo "		<div style='position: relative; display: inline-block;'>\n";
 	echo "			<span class='hud_stat' onclick=\"window.open('".$dashboard_url."', '".$dashboard_target."', '".$window_parameters."')\"><i class=\"fas ".$dashboard_icon."\"></i></span>\n";
diff --git a/app/ring_groups/resources/dashboard/ring_group_forward.php b/app/ring_groups/resources/dashboard/ring_group_forward.php
index a62b352677..3e69a0d674 100644
--- a/app/ring_groups/resources/dashboard/ring_group_forward.php
+++ b/app/ring_groups/resources/dashboard/ring_group_forward.php
@@ -153,7 +153,7 @@
 //ring group forward
 	echo "<div class='hud_box'>\n";
 
-	echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+	echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast');\"").">\n";
 	echo "		<span class='hud_title'>".$text['header-ring-group-forward']."</span>\n";
 
 //doughnut chart
@@ -307,7 +307,7 @@
 			echo "</form>\n";
 		}
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
 	echo "</div>\n";
 
diff --git a/app/switch/resources/dashboard/switch_status.php b/app/switch/resources/dashboard/switch_status.php
index cbcddbc288..771ac658fd 100644
--- a/app/switch/resources/dashboard/switch_status.php
+++ b/app/switch/resources/dashboard/switch_status.php
@@ -77,13 +77,13 @@
 	}
 
 //show the content
-	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_switch_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_switch_status_details').slideToggle('fast');\"").">\n";
 	echo "	<span class='hud_title'>".$text['label-switch_status']."</span>\n";
 
 	if (!isset($dashboard_chart_type) || $dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
-		<div class='hud_chart'><canvas id='switch_status_chart'></canvas></div>
+		<div class='hud_chart' style='width: 175px;'><canvas id='switch_status_chart'></canvas></div>
 
 		<script>
 			const switch_status_chart = new Chart(
@@ -178,7 +178,7 @@
 		echo "</div>";
 		//$n++;
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_switch_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_switch_status_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
 	echo "</div>\n";
 
diff --git a/app/system/resources/dashboard/system_counts.php b/app/system/resources/dashboard/system_counts.php
index add6584799..f699ae95a9 100644
--- a/app/system/resources/dashboard/system_counts.php
+++ b/app/system/resources/dashboard/system_counts.php
@@ -295,7 +295,7 @@
 	echo "<div class='hud_box'>\n";
 	if ($show_stat) {
 
-		echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_counts_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+		echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_counts_details').slideToggle('fast');\"").">\n";
 		echo "	<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-system_counts']."</a></span>\n";
 
 		if (!isset($dashboard_chart_type) || $dashboard_chart_type == "doughnut") {
@@ -499,7 +499,7 @@
 		echo "</div>";
 		//$n++;
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_system_counts_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>\n";
+		echo "<span class='hud_expander' onclick=\"$('#hud_system_counts_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>\n";
 	}
 	echo "</div>\n";
 ?>
diff --git a/app/system/resources/dashboard/system_cpu_status.php b/app/system/resources/dashboard/system_cpu_status.php
index f95c1b9423..66a35c6bca 100644
--- a/app/system/resources/dashboard/system_cpu_status.php
+++ b/app/system/resources/dashboard/system_cpu_status.php
@@ -51,7 +51,7 @@
 	}
 
 	//show the content
-	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast');\"").">\n";
 	echo "	<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-cpu_usage']."</a></span>\n";
 
 	$token = (new token())->create($_SERVER['PHP_SELF']);
@@ -379,7 +379,7 @@
 		echo "</div>";
 		//$n++;
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
 	echo "</div>\n";
 
diff --git a/app/system/resources/dashboard/system_disk_usage.php b/app/system/resources/dashboard/system_disk_usage.php
index ada15830fd..00fc0b9ab6 100644
--- a/app/system/resources/dashboard/system_disk_usage.php
+++ b/app/system/resources/dashboard/system_disk_usage.php
@@ -37,7 +37,7 @@
 		if (!empty($percent_disk_usage)) {
 
 			//add half doughnut chart
-			echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_disk_usage_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
+			echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_disk_usage_details').slideToggle('fast');\"").">\n";
 			echo "		<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-disk_usage']."</a></span>\n";
 
 			if (!isset($dashboard_chart_type) || $dashboard_chart_type == "doughnut") {
@@ -155,7 +155,7 @@
 		echo "</div>";
 		//$n++;
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_system_disk_usage_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"><span class='fas fa-ellipsis-h'></span></span>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_system_disk_usage_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
 	echo "</div>\n";
 
diff --git a/app/system/resources/dashboard/system_services.php b/app/system/resources/dashboard/system_services.php
index 1bccbc9172..6c387933f4 100644
--- a/app/system/resources/dashboard/system_services.php
+++ b/app/system/resources/dashboard/system_services.php
@@ -159,7 +159,7 @@
 
 //show the results
 echo "<div class='hud_box'>\n";
-echo "	<div class='hud_content' ".($dashboard_details_state == 'disabled' ?: "onclick=\"$('#hud_system_services_details').slideToggle('fast'); toggle_grid_row_end('$dashboard_id');\""). ">\n";
+echo "	<div class='hud_content' ".($dashboard_details_state == 'disabled' ?: "onclick=\"$('#hud_system_services_details').slideToggle('fast');\""). ">\n";
 echo "		<span class='hud_title'>System Services</span>\n";
 
 //doughnut chart
@@ -250,5 +250,6 @@ if ($dashboard_details_state != 'disabled') {
 
 	echo "		</table>\n";
 	echo "	</div>\n";
+	echo "<span class='hud_expander' onclick=\"$('#hud_system_services_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 }
 echo "</div>\n";
diff --git a/app/system/resources/dashboard/system_status.php b/app/system/resources/dashboard/system_status.php
index 1d50726db9..d1a022061f 100644
--- a/app/system/resources/dashboard/system_status.php
+++ b/app/system/resources/dashboard/system_status.php
@@ -120,7 +120,7 @@
 <?php
 
 //show the results
-	echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+	echo "	<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_system_status_details').slideToggle('fast');\"").">\n";
 	echo "		<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-system_status']."</a></span>\n";
 
 	if ($dashboard_chart_type == "doughnut") {
@@ -406,7 +406,7 @@
 		echo "</div>";
 		//$n++;
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_system_status_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_system_status_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
 	echo "</div>\n";
 
diff --git a/app/voicemails/resources/dashboard/voicemails.php b/app/voicemails/resources/dashboard/voicemails.php
index e5f42636af..d8fad929bb 100644
--- a/app/voicemails/resources/dashboard/voicemails.php
+++ b/app/voicemails/resources/dashboard/voicemails.php
@@ -49,7 +49,7 @@
 		}
 	}
 
-	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_voicemail_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_voicemail_details').slideToggle('fast');\"").">\n";
 	echo "	<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php'\">".$text['label-new_messages']."</a></span>";
 
 	if (isset($dashboard_chart_type) && $dashboard_chart_type == "doughnut") {
@@ -147,7 +147,7 @@
 		echo "</div>";
 		//$n++;
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_voicemail_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_voicemail_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
 
 	echo "</div>\n";
diff --git a/app/xml_cdr/resources/dashboard/missed_calls.php b/app/xml_cdr/resources/dashboard/missed_calls.php
index 23e6b7b353..d03300c40e 100644
--- a/app/xml_cdr/resources/dashboard/missed_calls.php
+++ b/app/xml_cdr/resources/dashboard/missed_calls.php
@@ -90,7 +90,7 @@
 //missed calls
 	echo "<div class='hud_box'>\n";
 
-	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_missed_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\"").">\n";
 	echo "	<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?call_result=missed'\">".$text['label-missed_calls']."</a></span>";
 
 	if ($dashboard_chart_type == "doughnut") {
@@ -214,7 +214,7 @@
 		echo "</div>";
 		//$n++;
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_missed_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
 	echo "</div>\n";
 
diff --git a/app/xml_cdr/resources/dashboard/recent_calls.php b/app/xml_cdr/resources/dashboard/recent_calls.php
index 0ef18847f5..2a57a90467 100644
--- a/app/xml_cdr/resources/dashboard/recent_calls.php
+++ b/app/xml_cdr/resources/dashboard/recent_calls.php
@@ -87,7 +87,7 @@
 //recent calls
 	echo "<div class='hud_box'>\n";
 
-	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_recent_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"").">\n";
+	echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_recent_calls_details').slideToggle('fast');\"").">\n";
 	echo "	<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php';\">".$text['label-recent_calls']."</a></span>\n";
 
 	if ($dashboard_chart_type == "doughnut") {
@@ -234,7 +234,7 @@
 		echo "<span style='display: block; margin: 6px 0 7px 0;'><a href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php'>".$text['label-view_all']."</a></span>\n";
 		echo "</div>";
 
-		echo "<span class='hud_expander' onclick=\"$('#hud_recent_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"><span class='fas fa-ellipsis-h'></span></span>";
+		echo "<span class='hud_expander' onclick=\"$('#hud_recent_calls_details').slideToggle('fast');\"><span class='fas fa-ellipsis-h'></span></span>";
 	}
 	echo "</div>\n";
 
diff --git a/core/dashboard/dashboard_edit.php b/core/dashboard/dashboard_edit.php
index 62084418af..69c59fa0c6 100644
--- a/core/dashboard/dashboard_edit.php
+++ b/core/dashboard/dashboard_edit.php
@@ -831,7 +831,7 @@
 		if ($dashboard_chart_type == 'line' || $dashboard_path == 'system/system_cpu_status') {
 			echo "		<option value='line' ".($dashboard_chart_type == "line" ? "selected='selected'" : null).">".$text['label-line']."</option>\n";
 		}
-		if ($dashboard_chart_type == "icon" || in_array($dashboard_path, ['domains/domains', 'xml_cdr/missed_calls', 'voicemails/voicemails', 'xml_cdr/recent_calls', 'registrations/registrations'])) {
+		if ($dashboard_chart_type == "icon" || in_array($dashboard_path, ['active_calls/active_calls', 'domains/domains', 'xml_cdr/missed_calls', 'voicemails/voicemails', 'xml_cdr/recent_calls', 'registrations/registrations'])) {
 			echo "		<option value='icon' ".($dashboard_chart_type == "icon" ? "selected='selected'" : null).">".$text['label-icon']."</option>\n";
 		}
 		echo "		<option value='number' ".($dashboard_chart_type == "number" ? "selected='selected'" : null).">".$text['label-number']."</option>\n";
diff --git a/core/dashboard/index.php b/core/dashboard/index.php
index f5fecff785..8b23c8dc72 100644
--- a/core/dashboard/index.php
+++ b/core/dashboard/index.php
@@ -109,11 +109,11 @@
 	$sql .= "dashboard_parent_uuid ";
 	$sql .= "from v_dashboard as d ";
 	$sql .= "where dashboard_enabled = 'true' ";
-	$sql .= "and dashboard_uuid in (";
-	$sql .= "	select dashboard_uuid from v_dashboard_groups where group_uuid in (";
+	$sql .= "and dashboard_uuid in ( ";
+	$sql .= "	select dashboard_uuid from v_dashboard_groups where group_uuid in ( ";
 	$sql .= "		".$group_uuids_in." ";
-	$sql .= "	)";
-	$sql .= ")";
+	$sql .= "	) ";
+	$sql .= ") ";
 	$sql .= "order by dashboard_order, dashboard_name asc ";
 	$dashboard = $database->select($sql, $parameters ?? null, 'all');
 	unset($sql, $parameters);
@@ -226,8 +226,8 @@
 		echo button::create(['type'=>'submit','label'=>$text['button-save'],'icon'=>$settings->get('theme', 'button_icon_save'),'id'=>'btn_save','name'=>'btn_save','style'=>'display: none; margin-left: 15px;']);
 	}
 	echo "<span id='expand_contract'>\n";
-		echo button::create(['type'=>'button','label'=>$text['button-expand_all'],'icon'=>$settings->get('theme', 'button_icon_expand'),'id'=>'btn_expand','name'=>'btn_expand','style'=>($expanded_all ? 'display: none;' : null),'onclick'=>"$('.hud_details').slideDown('fast'); $(this).hide(); $('#btn_contract').show(); toggle_grid_row_end_all();"]);
-		echo button::create(['type'=>'button','label'=>$text['button-collapse_all'],'icon'=>$settings->get('theme', 'button_icon_contract'),'id'=>'btn_contract','name'=>'btn_contract','style'=>(!$expanded_all ? 'display: none;' : null),'onclick'=>"$('.hud_details').slideUp('fast'); $(this).hide(); $('#btn_expand').show(); toggle_grid_row_end_all();"]);
+		echo button::create(['type'=>'button','label'=>$text['button-expand_all'],'icon'=>$settings->get('theme', 'button_icon_expand'),'id'=>'btn_expand','name'=>'btn_expand','style'=>($expanded_all ? 'display: none;' : null),'onclick'=>"$('.hud_details').slideDown('fast'); $(this).hide(); $('#btn_contract').show(); toggle_grid_row_span_all();"]);
+		echo button::create(['type'=>'button','label'=>$text['button-collapse_all'],'icon'=>$settings->get('theme', 'button_icon_contract'),'id'=>'btn_contract','name'=>'btn_contract','style'=>(!$expanded_all ? 'display: none;' : null),'onclick'=>"$('.hud_details').slideUp('fast'); $(this).hide(); $('#btn_expand').show(); toggle_grid_row_span_all();"]);
 	echo "</span>\n";
 	if (permission_exists('dashboard_edit')) {
 		echo button::create(['type'=>'button','label'=>$text['button-edit'],'icon'=>$settings->get('theme', 'button_icon_edit'),'id'=>'btn_edit','name'=>'btn_edit','style'=>'margin-left: 15px;','onclick'=>"edit_mode('on');"]);
@@ -405,6 +405,24 @@ foreach ($dashboard as $row) {
 			echo "	height: 195px;\n";
 			echo "}\n";
 	}
+	if (!empty($row['dashboard_row_span'])) {
+		echo "#".$dashboard_id." {\n";
+		echo "	grid-row: span ".$row['dashboard_row_span'].";\n";
+		echo "}\n";
+		echo "#".$dashboard_id.".expanded {\n";
+		echo "	grid-row: span ".($row['dashboard_row_span'] + 3).";\n";
+		echo "}\n";
+	}
+	if (!empty($row['dashboard_column_span'])) {
+		echo "#".$dashboard_id." {\n";
+		echo "	grid-column: span ".$row['dashboard_column_span'].";\n";
+		echo "}\n";
+	}
+	if ($row['dashboard_path'] != "dashboard/icon" && $row['dashboard_chart_type'] != "icon" && $row['dashboard_column_span'] == 1) {
+		echo "#".$dashboard_id.".child_widget {\n";
+		echo "	grid-column: span 2;\n";
+		echo "}\n";
+	}
 }
 ?>
 
@@ -415,7 +433,7 @@ foreach ($dashboard as $row) {
 	<?php
 		foreach ($dashboard as $row) {
 			$dashboard_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_uuid']));
-			if (isset($row['dashboard_column_span']) && is_numeric($row['dashboard_column_span'])) {
+			if (!empty($row['dashboard_column_span'])) {
 				echo "#".$dashboard_id." {\n";
 				echo "	grid-column: span 1;\n";
 				echo "}\n";
@@ -437,18 +455,18 @@ foreach ($dashboard as $row) {
 	<?php
 		foreach ($dashboard as $row) {
 			$dashboard_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_uuid']));
-			if (is_numeric($row['dashboard_column_span']) && $row['dashboard_column_span'] > 2) {
+			if ($row['dashboard_column_span'] > 2) {
 				echo "#".$dashboard_id." {\n";
 				echo "	grid-column: span 2;\n";
 				echo "}\n";
 			}
-			else if (is_numeric($row['dashboard_column_span'])) {
-				echo "#".$dashboard_id." {\n";
-				echo "	grid-column: span ".$row['dashboard_column_span'].";\n";
+			if ($row['dashboard_details_state'] == "expanded") {
+				echo "#".$dashboard_id." .hud_box .hud_details {\n";
+				echo "	display: block;\n";
 				echo "}\n";
 			}
 			if ($row['dashboard_details_state'] == "contracted") {
-				echo "#".$dashboard_id." .hud_box .hud_details {\n";
+				echo "#".$dashboard_id." .widget .hud_box .hud_details {\n";
 				echo "	display: none;\n";
 				echo "}\n";
 			}
@@ -469,9 +487,9 @@ foreach ($dashboard as $row) {
 	<?php
 		foreach ($dashboard as $row) {
 			$dashboard_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_uuid']));
-			if (is_numeric($row['dashboard_column_span'])) {
+			if ($row['dashboard_column_span'] > 3) {
 				echo "#".$dashboard_id." {\n";
-				echo "	grid-column: span ".$row['dashboard_column_span'].";\n";
+				echo "	grid-column: span 3;\n";
 				echo "}\n";
 			}
 		}
@@ -494,48 +512,55 @@ foreach ($dashboard as $row) {
 
 <script>
 
-function toggle_grid_row_end(dashboard_name) {
-	let widget = document.getElementById(dashboard_name.toLowerCase().replace(/ /g, '_'));
-	let state = widget.getAttribute('data-state');
-	let current_row_end = widget.style.gridRowEnd;
-	let current_row_end_number = current_row_end.startsWith('span ') ? Number(current_row_end.replace('span ', '')) : 0;
+document.addEventListener('click', function(event) {
+	let hud_content = event.target.closest('.hud_content');
+	let hud_expander = event.target.closest('.hud_expander');
 
-	if (state == 'expanded') {
-		widget.style.gridRowEnd = 'span ' + (current_row_end_number - 3);
-		widget.dataset.state = 'contracted';
+	if (hud_content || hud_expander) {
+		let widget = event.target.closest('div.widget, div.child_widget');
+
+		if (widget.classList.contains('disabled')) {
+			return;
+		}
+
+		if (widget && widget.id) {
+			toggle_grid_row_span(widget.id);
+		}
+	}
+});
+
+function toggle_grid_row_span(dashboard_id) {
+	let widget = document.getElementById(dashboard_id);
+
+	if (widget.classList.contains('expanded')) {
+		widget.classList.remove('expanded');
 	}
 	else {
-		widget.style.gridRowEnd = 'span ' + (current_row_end_number + 3);
-		widget.dataset.state = 'expanded';
+		widget.classList.add('expanded');
 	}
 }
 
 let first_toggle = false;
 
-function toggle_grid_row_end_all() {
-	let widgets = document.querySelectorAll('div.widget');
+function toggle_grid_row_span_all() {
+	const widgets = document.querySelectorAll('div.widget, div.child_widget');
 
-	widgets.forEach(div => {
-		let state = div.getAttribute('data-state');
-		let current_row_end = div.style.gridRowEnd;
-		let current_row_end_number = current_row_end.startsWith('span ') ? Number(current_row_end.replace('span ', '')) : 0;
-
-		// Skip if widget details state is disabled
-		if (state === 'disabled') {
+	widgets.forEach(widget => {
+		if (widget.classList.contains('disabled')) {
 			return;
 		}
 
-		// On the first call, skip expanded widgets
-		if (!first_toggle && state === 'expanded') {
+		if (!first_toggle && widget.classList.contains('expanded')) {
 			return;
 		}
 
-		if (state === 'expanded') {
-			div.style.gridRowEnd = 'span ' + (current_row_end_number - 3);
-			div.dataset.state = 'contracted';
-		} else {
-			div.style.gridRowEnd = 'span ' + (current_row_end_number + 3);
-			div.dataset.state = 'expanded';
+		if (widget.classList.contains('expanded') || widget.getAttribute('data-expanded-all') === 'true') {
+			widget.classList.remove('expanded');
+			widget.setAttribute('data-expanded-all', 'false');
+		}
+		else {
+			widget.classList.add('expanded');
+			widget.setAttribute('data-expanded-all', 'true');
 		}
 	});
 
@@ -550,6 +575,11 @@ function toggle_grid_row_end_all() {
 	echo "<div class='widgets' id='widgets' style='padding: 0 5px;'>\n";
 	$x = 0;
 	foreach ($dashboard as $row) {
+		//skip child widgets
+		if (!empty($row['dashboard_parent_uuid'])) {
+			continue;
+		}
+
 		//set the variables
 		$dashboard_uuid = $row['dashboard_uuid'] ?? '';
 		$dashboard_name = $row['dashboard_name'] ?? '';
@@ -561,12 +591,12 @@ function toggle_grid_row_end_all() {
 		$dashboard_content = $row['dashboard_content'] ?? '';
 		$dashboard_content_text_align = $row['dashboard_content_text_align'] ?? '';
 		$dashboard_content_details = $row['dashboard_content_details'] ?? '';
-		$dashboard_chart_type = $row['dashboard_chart_type'] ?? 'doughnut';
+		$dashboard_chart_type = $row['dashboard_chart_type'] ?? '';
 		$dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', '');
 		$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', '');
 		$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', '');
 		$dashboard_details_state = $row['dashboard_details_state'] ?? 'hidden';
-		$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
+		$dashboard_row_span = $row['dashboard_row_span'] ?? '';
 
 		//define the regex patterns
 		$uuid_pattern = '/[^-A-Fa-f0-9]/';
@@ -601,13 +631,13 @@ function toggle_grid_row_end_all() {
 		$widget_name = $dashboard_path_array[1];
 		$path_array = glob(dirname(__DIR__, 2).'/*/'.$application_name.'/resources/dashboard/'.$widget_name.'.php');
 
-		if (empty($row['dashboard_parent_uuid'])) {
-			echo "<div class='widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' id='".$dashboard_id."' ".($dashboard_path == 'dashboard/parent' ? "data-is-parent='true'" : null)." draggable='false'>\n";
-			if (file_exists($path_array[0])) {
-				include $path_array[0];
-			}
-			echo "</div>\n";
+		echo "<div class='widget ".$dashboard_details_state."' id='".$dashboard_id."' ".($dashboard_path == 'dashboard/parent' ? "data-is-parent='true'" : null)." draggable='false'>\n";
+		if (file_exists($path_array[0])) {
+			include $path_array[0];
 		}
+		echo "</div>\n";
+
+
 		$x++;
 	}
 	echo "</div>\n";
@@ -675,7 +705,7 @@ function toggle_grid_row_end_all() {
 					let widget_ids_list = [];
 					let order = 10;
 
-					document.querySelectorAll('#widgets > div.widget[id]').forEach(widget => {
+					widgets.querySelectorAll(':scope > div.widget[id]').forEach(widget => {
 						const widget_id = widget.id;
 
 						//add the widgets to the list
@@ -709,16 +739,21 @@ function toggle_grid_row_end_all() {
 					preventOnFilter: true,
 					ghostClass: 'ghost',
 					onSort: update_widget_order,
-					onAdd: function (evt) {
-						evt.item.classList.add('widget');
-						evt.item.classList.remove('child_widget');
+					onAdd: function (event) {
+						event.item.classList.add('widget');
 						update_widget_order();
 					},
-					onRemove: function (evt) {
-						evt.item.classList.remove('widget');
-						evt.item.classList.add('child_widget');
+					onRemove: function (event) {
+						event.item.classList.remove('widget');
 						update_widget_order();
 					},
+					onMove: function (event) {
+						if (event.to !== event.from) {
+							event.dragged.classList.remove('widget');
+						} else {
+							event.dragged.classList.add('widget');
+						}
+					},
 				});
 
 				document.querySelectorAll('.parent_widget').forEach(function(container) {
@@ -736,15 +771,21 @@ function toggle_grid_row_end_all() {
 						draggable: '.child_widget',
 						ghostClass: 'ghost',
 						fallbackOnBody: true,
+						swapThreshold: 0.65,
 						onSort: update_widget_order,
-						onAdd: function (evt) {
+						onAdd: function (event) {
+							event.item.classList.add('child_widget');
 							update_widget_order();
-							let current_row_end = evt.item.style.gridRowEnd;
-							evt.item.style.gridColumn = current_row_end;
 						},
-						onRemove: function (evt) {
+						onRemove: function (event) {
 							update_widget_order();
-							evt.item.style.gridColumn = '';
+						},
+						onMove: function (event) {
+							if (event.to !== event.from) {
+								event.dragged.classList.remove('child_widget');
+							} else {
+								event.dragged.classList.add('child_widget');
+							}
 						},
 					});
 				});
diff --git a/core/dashboard/resources/dashboard/content.php b/core/dashboard/resources/dashboard/content.php
index ec6424fc03..28339a8d98 100644
--- a/core/dashboard/resources/dashboard/content.php
+++ b/core/dashboard/resources/dashboard/content.php
@@ -24,7 +24,7 @@
 
 //dashboard icon
 	echo "<div class='hud_box'>\n";
-	echo "	<div class='hud_content' ".(!empty($row['dashboard_background_color']) ? "style='background: ".$row['dashboard_background_color'].";'" : null)." ".(empty($dashboard_details_state) || $dashboard_details_state != "disabled" ? "onclick=\"$('#hud_content_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"" : null).">\n";
+	echo "	<div class='hud_content' ".(!empty($row['dashboard_background_color']) ? "style='background: ".$row['dashboard_background_color'].";'" : null)." ".(empty($dashboard_details_state) || $dashboard_details_state != "disabled" ? "onclick=\"$('#hud_content_details').slideToggle('fast');\"" : null).">\n";
 	echo "		<span class='hud_title' ".(!empty($row['dashboard_label_background_color']) ? "style='background: ".$row['dashboard_label_background_color'].";'" : null).">".escape($dashboard_name)."</span>";
 	echo "		<span style='padding: 12px; height: ".$dashboard_content_height."; max-height: ".$dashboard_content_height.";  text-align: ".$row['dashboard_content_text_align']."; vertical-align: ".$dashboard_content_text_vertical_align."; overflow: auto; ".(!empty($row['dashboard_number_text_color']) ? "color: ".$row['dashboard_number_text_color'].";" : null)."'>".$dashboard_content."</span>\n";
 	echo "	</div>\n";
diff --git a/core/dashboard/resources/dashboard/icon.php b/core/dashboard/resources/dashboard/icon.php
index 54581c2350..a7ec7c09df 100644
--- a/core/dashboard/resources/dashboard/icon.php
+++ b/core/dashboard/resources/dashboard/icon.php
@@ -23,7 +23,7 @@
 
 //dashboard icon
 	echo "<div class='hud_box'>\n";
-	echo "	<div class='hud_content' ".(empty($dashboard_details_state) || $dashboard_details_state != "disabled" ? "onclick=\"$('#hud_icon_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"" : null).">\n";
+	echo "	<div class='hud_content' ".(empty($dashboard_details_state) || $dashboard_details_state != "disabled" ? "onclick=\"$('#hud_icon_details').slideToggle('fast');\"" : null).">\n";
 	echo "		<span class='hud_title'><a style='padding: 10px 0;' onclick=\"window.open('".$dashboard_url."', '".$dashboard_target."', '".$window_parameters."'); return false;\">".escape($dashboard_label)."</a></span>\n";
 	echo "		<span class='hud_stat'><a style='padding: 10px 20px;' onclick=\"window.open('".$dashboard_url."', '".$dashboard_target."', '".$window_parameters."'); return false;\"><i class=\"fas ".$dashboard_icon."\"></i></a></span>\n";
 	echo "	</div>\n";
diff --git a/core/dashboard/resources/dashboard/parent.php b/core/dashboard/resources/dashboard/parent.php
index 01eeb07d2c..b53a034040 100644
--- a/core/dashboard/resources/dashboard/parent.php
+++ b/core/dashboard/resources/dashboard/parent.php
@@ -64,13 +64,6 @@
 	$parent_widgets = $database->select($sql, $parameters ?? null, 'all');
 	unset($sql, $parameters);
 
-//prepare variables
-	$dashboard_target = ($dashboard_target == 'new') ? '_blank' : '_self';
-	$window_parameters = '';
-	if (!empty($dashboard_width) && !empty($dashboard_height)) {
-		$window_parameters .= "width=".$dashboard_width.",height=".$dashboard_height;
-	}
-
 ?>
 
 <style>
@@ -98,7 +91,7 @@ div.child_widget.editable div.hud_box:first-of-type {
 	border: 1px dashed rgba(0,0,0,0.4);
 }
 
-div.child_widget:not(:has(.parent_widget)) .hud_content {
+div.child_widget .hud_content {
 	align-content: center;
 }
 
@@ -106,14 +99,6 @@ div.child_widget div.hud_chart  {
 	padding: 7px;
 }
 
-div.child_widget:hover:has(i) div.hud_box,
-div.child_widget.editable:hover:has(i) div.hud_box {
-	transform: scale(1.05, 1.05);
-	-webkit-transition: .1s;
-	-moz-transition: .1s;
-	transition: .1s;
-}
-
 /* dashboard settings */
 <?php
 foreach ($parent_widgets as $row) {
@@ -123,14 +108,25 @@ foreach ($parent_widgets as $row) {
 		echo "	color: ".$row['dashboard_icon_color'].";\n";
 		echo "}\n";
 	}
+	if ($row['dashboard_label_enabled'] == 'false') {
+		echo "#".$dashboard_id." .hud_title:first-of-type {\n";
+		echo "	display: none;\n";
+		echo "}\n";
+		echo "#".$dashboard_id." .hud_content {\n";
+		echo "	align-content: center;\n";
+		echo "}\n";
+		echo "#".$dashboard_id." .hud_chart {\n";
+		echo "	padding-top: 0;\n";
+		echo "}\n";
+	}
 	if (!empty($row['dashboard_label_text_color']) || !empty($row['dashboard_label_background_color'])) {
-		echo "#".$dashboard_id." .hud_title {\n";
+		echo "#".$dashboard_id." .hud_title:first-of-type {\n";
 		if (!empty($row['dashboard_label_text_color'])) { echo "	color: ".$row['dashboard_label_text_color'].";\n"; }
 		if (!empty($row['dashboard_label_background_color'])) { echo "	background-color: ".$row['dashboard_label_background_color'].";\n"; }
 		echo "}\n";
 	}
 	if (!empty($row['dashboard_label_text_color_hover']) || !empty($row['dashboard_label_background_color_hover'])) {
-		echo "#".$dashboard_id.":hover .hud_title {\n";
+		echo "#".$dashboard_id.":hover .hud_title:first-of-type {\n";
 		if (!empty($row['dashboard_label_text_color_hover'])) { echo "	color: ".$row['dashboard_label_text_color_hover'].";\n"; }
 		if (!empty($row['dashboard_label_background_color_hover'])) { echo "	background-color: ".$row['dashboard_label_background_color_hover'].";\n"; }
 		echo "}\n";
@@ -147,31 +143,38 @@ foreach ($parent_widgets as $row) {
 	}
 	if (!empty($row['dashboard_background_color'])) {
 		$background_color = json_decode($row['dashboard_background_color'], true);
-		echo "#".$dashboard_id." {\n";
+		echo "#".$dashboard_id." .hud_content {\n";
 		echo "	background: ".$background_color[0].";\n";
-		echo "	background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
+		if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') {
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
+		}
+		else { //simple
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color[0]." 0%, ".$background_color[1]." 100%);\n";
+		}
 		echo "}\n";
 	}
 	if (!empty($row['dashboard_background_color_hover'])) {
 		$background_color_hover = json_decode($row['dashboard_background_color_hover'], true);
-		echo "#".$dashboard_id.":hover {\n";
+		echo "#".$dashboard_id.":hover .hud_content {\n";
 		echo "	background: ".$background_color_hover[0].";\n";
-		echo "	background-image: linear-gradient(to right, ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
+		if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') {
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
+		}
+		else { //simple
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$background_color_hover[0]." 0%, ".$background_color_hover[1]." 100%);\n";
+		}
 		echo "}\n";
 	}
 	if (!empty($row['dashboard_detail_background_color'])) {
 		$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
 		echo "#".$dashboard_id." .hud_details {\n";
 		echo "	background: ".$detail_background_color[0].";\n";
-		echo "	background-image: linear-gradient(to right, ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n";
-		echo "}\n";
-	}
-	if ($row['dashboard_label_enabled'] == 'false') {
-		echo "#".$dashboard_id." .hud_title {\n";
-		echo "	display: none;\n";
-		echo "}\n";
-		echo "#".$dashboard_id." .hud_content {\n";
-		echo "	align-content: center;\n";
+		if (empty($row['dashboard_background_gradient_style']) || $row['dashboard_background_gradient_style'] == 'mirror') {
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n";
+		}
+		else { //simple
+			echo "	background-image: linear-gradient(".(empty($row['dashboard_background_gradient_angle']) ? '0deg' : $row['dashboard_background_gradient_angle'].'deg').", ".$detail_background_color[0]." 0%, ".$detail_background_color[1]." 100%);\n";
+		}
 		echo "}\n";
 	}
 	if ($row['dashboard_path'] == "dashboard/icon") {
@@ -179,17 +182,54 @@ foreach ($parent_widgets as $row) {
 		echo "#".$dashboard_id." span.hud_title,\n";
 		echo "#".$dashboard_id." span.hud_stat {\n";
 		echo "	transition: .4s;\n";
-		echo "	border-radius: 5px;\n";
 		echo "}\n";
 	}
-	if ($row['dashboard_column_span'] > 1) {
-		echo "#".$dashboard_id.".child_widget {\n";
-		echo "	grid-column: span ".preg_replace($number_pattern, '', $row['dashboard_column_span']).";\n";
-		echo "}\n";
+	switch ($row['dashboard_row_span']) {
+		case 1:
+			echo "#".$dashboard_id." .hud_content {\n";
+			echo "	height: 89.5px;\n";
+			echo "}\n";
+			echo "#".$dashboard_id." .hud_stat {\n";
+			echo "	line-height: 0;\n";
+			echo "	font-size: 30pt;\n";
+			echo "}\n";
+			echo "#".$dashboard_id." .hud_chart {\n";
+			echo "	height: 54px;\n";
+			echo "	width: 180px;\n";
+			echo "	padding-top: 0;\n";
+			echo "}\n";
+			echo "#".$dashboard_id." div.hud_content .fas {\n";
+			echo "	line-height: 0;\n";
+			echo "	font-size: 24pt;\n";
+			echo "}\n";
+			break;
+		case 2:
+			echo "#".$dashboard_id." .hud_content {\n";
+			echo "	height: 195px;\n";
+			echo "}\n";
+			break;
+		case 3:
+			echo "#".$dashboard_id." .hud_content {\n";
+			echo "	height: 300.5px;\n";
+			echo "}\n";
+			break;
+		case 4:
+			echo "#".$dashboard_id." .hud_content {\n";
+			echo "	height: 406px;\n";
+			echo "}\n";
+			break;
+		default: //if empty
+			echo "#".$dashboard_id." .hud_content {\n";
+			echo "	height: 195px;\n";
+			echo "}\n";
 	}
-	else if ($row['dashboard_row_span'] > 1) {
-		echo "#".$dashboard_id.".child_widget {\n";
-		echo "	grid-column: span 2;\n";
+	if ($row['dashboard_path'] === "dashboard/icon" || $row['dashboard_chart_type'] === "icon") {
+		echo "#".$dashboard_id.":hover div.hud_box:first-of-type,\n";
+		echo "#".$dashboard_id.".editable:hover div.hud_box:first-of-type {\n";
+		echo "	transform: scale(1.05, 1.05);\n";
+		echo "	-webkit-transition: .1s;\n";
+		echo "	-moz-transition: .1s;\n";
+		echo "	transition: .1s;\n";
 		echo "}\n";
 	}
 }
@@ -217,12 +257,12 @@ foreach ($parent_widgets as $row) {
 		$dashboard_content = $row['dashboard_content'] ?? '';
 		$dashboard_content_text_align = $row['dashboard_content_text_align'] ?? '';
 		$dashboard_content_details = $row['dashboard_content_details'] ?? '';
-		$dashboard_chart_type = $row['dashboard_chart_type'] ?? 'doughnut';
+		$dashboard_chart_type = $row['dashboard_chart_type'] ?? '';
 		$dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', '');
 		$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', '');
 		$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', '');
 		$dashboard_details_state = $row['dashboard_details_state'] ?? 'disabled';
-		$dashboard_row_span = $row['dashboard_row_span'] ?? 1;
+		$dashboard_row_span = $row['dashboard_row_span'] ?? '';
 
 		//define the regex patterns
 		$uuid_pattern = '/[^-A-Fa-f0-9]/';
@@ -257,7 +297,7 @@ foreach ($parent_widgets as $row) {
 		$child_widget_name = $dashboard_path_array[1];
 		$path_array = glob(dirname(__DIR__, 4).'/*/'.$application_name.'/resources/dashboard/'.$child_widget_name.'.php');
 
-		echo "<div class='child_widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' id='".$dashboard_id."' draggable='false'>\n";
+		echo "<div class='child_widget ".$dashboard_details_state."' id='".$dashboard_id."' draggable='false'>\n";
 		if (file_exists($path_array[0])) {
 			include $path_array[0];
 		}
diff --git a/core/domains/resources/dashboard/domains.php b/core/domains/resources/dashboard/domains.php
index 8fa3251b3c..2f95f65702 100644
--- a/core/domains/resources/dashboard/domains.php
+++ b/core/domains/resources/dashboard/domains.php
@@ -33,7 +33,7 @@
 
 //dashboard icon
 	echo "<div class='hud_box'>\n";
-	echo "	<div class='hud_content' ".(empty($dashboard_details_state) || $dashboard_details_state != "disabled" ? "onclick=\"$('#hud_icon_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_id."');\"" : null).">\n";
+	echo "	<div class='hud_content' ".(empty($dashboard_details_state) || $dashboard_details_state != "disabled" ? "onclick=\"$('#hud_icon_details').slideToggle('fast');\"" : null).">\n";
 	echo "		<span class='hud_title' onclick=\"window.open('".$dashboard_url."', '".$dashboard_target."', '".$window_parameters."')\">".escape($dashboard_label)."</span>";
 	echo "		<div style='position: relative; display: inline-block;'>\n";
 	echo "			<span class='hud_stat' onclick=\"window.open('".$dashboard_url."', '".$dashboard_target."', '".$window_parameters."')\"><i class=\"fas ".$dashboard_icon."\"></i></span>\n";