From 78c5666aff3f1e15ae78be0dc57179a21b456591 Mon Sep 17 00:00:00 2001
From: AlexC <40072887+alexdcrane@users.noreply.github.com>
Date: Tue, 25 Jan 2022 11:03:37 -0700
Subject: [PATCH] Fixed dashboard layout bugs (#6263)

* Fixed dashboard layout bugs

* Update domain_limits.php

* Update missed_calls.php

* Update recent_calls.php

* Update voicemails.php

* Update system_counts.php

* Update system_cpu_status.php

* Update system_status.php

* Update caller_id.php
---
 .../resources/dashboard/domain_limits.php              |  7 +++----
 app/extensions/resources/dashboard/caller_id.php       |  4 ++--
 app/system/resources/dashboard/system_counts.php       |  2 +-
 app/system/resources/dashboard/system_cpu_status.php   |  2 +-
 app/system/resources/dashboard/system_status.php       |  2 +-
 app/voicemails/resources/dashboard/voicemails.php      |  2 +-
 app/xml_cdr/resources/dashboard/missed_calls.php       |  2 +-
 app/xml_cdr/resources/dashboard/recent_calls.php       |  2 +-
 core/dashboard/index.php                               | 10 +++++-----
 9 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/domain_limits/resources/dashboard/domain_limits.php b/app/domain_limits/resources/dashboard/domain_limits.php
index 8f935537a4..d892917288 100644
--- a/app/domain_limits/resources/dashboard/domain_limits.php
+++ b/app/domain_limits/resources/dashboard/domain_limits.php
@@ -19,9 +19,8 @@
 	$text = $language->get($_SESSION['domain']['language']['code'], 'core/user_settings');
 
 //domain limits
-	echo "<div class='hud_box'>\n";
-
 	if (is_array($_SESSION['limit']) && sizeof($_SESSION['limit']) > 0) {
+		echo "<div class='hud_box'>\n";
 		$c = 0;
 		$row_style["0"] = "row_style0";
 		$row_style["1"] = "row_style1";
@@ -58,10 +57,10 @@
 		if ($show_stat) {
 			//add doughnut chart
 			?>
-			<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
+			<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 25px;'>
 				<div style='width: 175px; height: 175px;'>
 					<canvas id='domain_limits_chart'></canvas>
-					<span style='color: rgb(125,125,125);'><?php echo $hud_stat_title;?></span>
+					<div style='color: rgb(125,125,125); margin-top: 2px;'><?php echo $hud_stat_title;?></div>
 				</div>
 			</div>
 
diff --git a/app/extensions/resources/dashboard/caller_id.php b/app/extensions/resources/dashboard/caller_id.php
index f6b6212431..e33291330a 100644
--- a/app/extensions/resources/dashboard/caller_id.php
+++ b/app/extensions/resources/dashboard/caller_id.php
@@ -205,10 +205,10 @@
 					else {
 						//caller id name and number inputs
 						echo "	<td class='input'>\n";
-						echo "		<input class='formfld' style='min-width: 50px; max-width: 100px;' type='text' name='extensions[".$x."][outbound_caller_id_name]' maxlength='255' value=\"".escape($row['outbound_caller_id_name'])."\">\n";
+						echo "		<input class='formfld' style='width: 70%;' type='text' name='extensions[".$x."][outbound_caller_id_name]' maxlength='255' value=\"".escape($row['outbound_caller_id_name'])."\">\n";
 						echo "	</td>\n";
 						echo "	<td class='input'>\n";
-						echo "		<input class='formfld' style='min-width: 50px; max-width: 100px;' type='text' name='extensions[".$x."][outbound_caller_id_number]' maxlength='255' value=\"".$row['outbound_caller_id_number']."\">\n";
+						echo "		<input class='formfld' style='width: 70%;' type='text' name='extensions[".$x."][outbound_caller_id_number]' maxlength='255' value=\"".$row['outbound_caller_id_number']."\">\n";
 						echo "	</td>\n";
 					}
 					echo "	<td class='description overflow hide-sm-dn'>\n";
diff --git a/app/system/resources/dashboard/system_counts.php b/app/system/resources/dashboard/system_counts.php
index b56530b97c..5d40b5bf10 100644
--- a/app/system/resources/dashboard/system_counts.php
+++ b/app/system/resources/dashboard/system_counts.php
@@ -291,7 +291,7 @@
 	if ($show_stat) {
 		//add doughnut chart
 		?>
-		<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 10px;'>
+		<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
 			<div style='width: 250px; height: 175px;'><canvas id='system_counts_chart'></canvas></div>
 		</div>
 
diff --git a/app/system/resources/dashboard/system_cpu_status.php b/app/system/resources/dashboard/system_cpu_status.php
index 84bd7e3844..73e20709fa 100644
--- a/app/system/resources/dashboard/system_cpu_status.php
+++ b/app/system/resources/dashboard/system_cpu_status.php
@@ -49,7 +49,7 @@
 
 //add half doughnut chart
 	?>
-	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 8px'>
+	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px'>
 		<div style='width: 175px; height: 175px; margin: 0 auto;'><canvas id='system_cpu_status_chart'></canvas></div>
 	</div>
 
diff --git a/app/system/resources/dashboard/system_status.php b/app/system/resources/dashboard/system_status.php
index ab26c0b6ab..17c7e11f75 100644
--- a/app/system/resources/dashboard/system_status.php
+++ b/app/system/resources/dashboard/system_status.php
@@ -38,7 +38,7 @@
 		if ($percent_disk_usage != '') {
 			//add half doughnut chart
 			?>
-			<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 8px'>
+			<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px'>
 				<div style='width: 175px; height: 175px;'><canvas id='system_status_chart'></canvas></div>
 			</div>
 
diff --git a/app/voicemails/resources/dashboard/voicemails.php b/app/voicemails/resources/dashboard/voicemails.php
index 7f3fb6dacf..aa0f7b80d3 100644
--- a/app/voicemails/resources/dashboard/voicemails.php
+++ b/app/voicemails/resources/dashboard/voicemails.php
@@ -56,7 +56,7 @@
 
 //add doughnut chart
 	?>
-	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 10px;'>
+	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
 		<div style='width: 175px; height: 175px;'><canvas id='new_messages_chart'></canvas></div>
 	</div>
 
diff --git a/app/xml_cdr/resources/dashboard/missed_calls.php b/app/xml_cdr/resources/dashboard/missed_calls.php
index ba830a020b..f4684bbc88 100644
--- a/app/xml_cdr/resources/dashboard/missed_calls.php
+++ b/app/xml_cdr/resources/dashboard/missed_calls.php
@@ -77,7 +77,7 @@
 
 //add doughnut chart
 	?>
-	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 10px;'>
+	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
 		<div style='width: 175px; height: 175px;'><canvas id='missed_calls_chart'></canvas></div>
 	</div>
 
diff --git a/app/xml_cdr/resources/dashboard/recent_calls.php b/app/xml_cdr/resources/dashboard/recent_calls.php
index 1467d88d00..29951d7ae0 100644
--- a/app/xml_cdr/resources/dashboard/recent_calls.php
+++ b/app/xml_cdr/resources/dashboard/recent_calls.php
@@ -76,7 +76,7 @@
 
 //add doughnut chart
 	?>
-	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 10px;'>
+	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;'>
 		<div style='width: 175px; height: 175px;'><canvas id='recent_calls_chart'></canvas></div>
 	</div>
 
diff --git a/core/dashboard/index.php b/core/dashboard/index.php
index 095917e4cc..1464487a4d 100644
--- a/core/dashboard/index.php
+++ b/core/dashboard/index.php
@@ -223,7 +223,7 @@
 
 /* Screen smaller than 550px? 1 columns */
 @media (max-width: 575px) {
-  .widgets { grid-template-columns: repeat(1, 1fr); }
+  .widgets { grid-template-columns: repeat(1, minmax(100px, 1fr)); }
   .col-num { grid-column: span 1; }
 	<?php
 		foreach($dashboard as $row) {
@@ -240,7 +240,7 @@
 
 /* Screen larger than 550px? 2 columns */
 @media (min-width: 575px) {
-  .widgets { grid-template-columns: repeat(2, 1fr); }
+  .widgets { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
   .col-num { grid-column: span 2; }
 	<?php
 		foreach($dashboard as $row) {
@@ -261,7 +261,7 @@
 
 /* Screen larger than 1300px? 3 columns */
 @media (min-width: 1300px) {
-  .widgets { grid-template-columns: repeat(3, 1fr); }
+  .widgets { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
   .col-num { grid-column: span 2; }
 	<?php
 		foreach($dashboard as $row) {
@@ -279,13 +279,13 @@
 
 /* Screen larger than 1500px? 4 columns */
 @media (min-width: 1500px) {
-  .widgets { grid-template-columns: repeat(4, 1fr); }
+  .widgets { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
   .col-num { grid-column: span 2; }
 }
 
 /* Screen larger than 2000px? 5 columns */
 @media (min-width: 2000px) {
-  .widgets { grid-template-columns: repeat(5, 1fr); }
+  .widgets { grid-template-columns: repeat(5, minmax(100px, 1fr)); }
   .col-num { grid-column: span 2; }
 }