From ef359424a514a7ef0da1a20c2f97a8a33ce966eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 24 May 2019 08:52:47 +0200
Subject: [PATCH] Singlestat: fixes issue with value placement and line wraps
 (#17249)

Fixes #17237
(cherry picked from commit 6acc7d37dad262a5f0a2442b2ec80c29fcdd1151)
---
 public/app/plugins/panel/singlestat/module.ts | 7 +++++--
 public/sass/components/_panel_singlestat.scss | 6 +-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index d0fa3c3183e..3272323c354 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -11,6 +11,8 @@ import TimeSeries from 'app/core/time_series2';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { GrafanaThemeType, getValueFormat, getColorFromHexRgbOrName, isTableData } from '@grafana/ui';
 
+const BASE_FONT_SIZE = 38;
+
 class SingleStatCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
 
@@ -384,10 +386,11 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       return valueString;
     }
 
-    function getSpan(className, fontSize, applyColoring, value) {
+    function getSpan(className, fontSizePercent, applyColoring, value) {
       value = $sanitize(templateSrv.replace(value, data.scopedVars));
       value = applyColoring ? applyColoringThresholds(value) : value;
-      return '<span class="' + className + '" style="font-size:' + fontSize + '">' + value + '</span>';
+      const pixelSize = (parseInt(fontSizePercent, 10) / 100) * BASE_FONT_SIZE;
+      return '<span class="' + className + '" style="font-size:' + pixelSize + 'px">' + value + '</span>';
     }
 
     function getBigValueHtml() {
diff --git a/public/sass/components/_panel_singlestat.scss b/public/sass/components/_panel_singlestat.scss
index 7854ac2093f..df8cbd0c037 100644
--- a/public/sass/components/_panel_singlestat.scss
+++ b/public/sass/components/_panel_singlestat.scss
@@ -6,17 +6,13 @@
 }
 
 .singlestat-panel-value-container {
-  // line-height 0 is imporant here as the font-size is on this
-  // level but overriden one level deeper and but the line-height: is still
-  // based on the base font size on this level. Using line-height: 0 fixes that
-  line-height: 0;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   position: relative;
   z-index: 1;
   font-weight: $font-weight-semi-bold;
-  font-size: 38px;
+  line-height: 1;
 }
 
 // Helps