fixed so panel title doesn't wrap and (#12142)

dashboard: fix so panel titles doesn't wrap

public/sass/pages/_alerting.scss

@@ -32,7 +32,7 @@
   .panel-alert-icon:before {
     content: '\e611';
     position: relative;
-    top: 1px;
+    top: 5px;
     left: -3px;
   }
 }

public/sass/pages/_dashboard.scss

@@ -68,17 +68,26 @@ div.flot-text {
   font-weight: $font-weight-semi-bold;
   position: relative;
   width: 100%;
-  display: block;
-  padding-bottom: 2px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  padding: 4px 0 4px;
 }
 
 .panel-title-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: calc(100% - 38px);
   cursor: pointer;
   font-weight: $font-weight-semi-bold;
 
   &:hover {
     color: $link-hover-color;
   }
+  .panel-has-alert & {
+    max-width: calc(100% - 54px);
+  }
 }
 
 .panel-menu-container {
@@ -97,7 +106,7 @@ div.flot-text {
   width: 16px;
   height: 16px;
   left: 1px;
-  top: 4px;
+  top: 2px;
 
   &:hover {
     color: $link-hover-color;
@@ -114,8 +123,6 @@ div.flot-text {
 }
 
 .panel-header {
-  text-align: center;
-
   &:hover {
     transition: background-color 0.1s ease-in-out;
     background-color: $panel-header-hover-bg;
@@ -156,8 +163,8 @@ div.flot-text {
 
   .fa {
     position: relative;
-    top: -4px;
-    left: -6px;
+    top: -2px;
+    left: 6px;
     font-size: 75%;
     z-index: 1;
   }