Adjusted header height for medium font size

-The size pushed the lower end of the row-wrapper
 outside of the parent container, which was caused
 by the heights not adding up.

Issue: DEB-163

src/definition/metric-semaphores.js

@@ -41,7 +41,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 10,
+        index: 8,
         color: '#f93f17'
       }
     },
@@ -52,7 +52,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 1,
+        index: 11,
         color: '#ffffff'
       }
     },
@@ -69,7 +69,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 8,
+        index: 9,
         color: '#ffcf02'
       }
     },
@@ -80,7 +80,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 15,
+        index: 12,
         color: '#000000'
       }
     },
@@ -91,7 +91,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 3,
+        index: 10,
         color: '#276e27'
       }
     },
@@ -102,7 +102,7 @@ const metricSemaphores = {
       component: 'color-picker',
       dualOutput: true,
       defaultValue: {
-        index: 1,
+        index: 11,
         color: '#ffffff'
       }
     }

src/headers-table/measurement-column-header.jsx

@@ -6,7 +6,7 @@ import Tooltip from '../tooltip/index.jsx';
 const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measurement, styling }) => {
   const title = `${measurement.name} ${measurement.magnitudeLabelSuffix}`;
   const { fontSizeAdjustment } = styling.headerOptions;
-  const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
+  const isMediumFontSize = fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
   if (hasSecondDimension) {
     const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%';
@@ -20,7 +20,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
       ...baseCSS,
       cursor: 'default',
       fontSize: `${baseFontSize + fontSizeAdjustment}px`,
-      height: isMediumFontSize ? '50px' : '25px',
+      height: isMediumFontSize ? '40px' : '25px',
       verticalAlign: 'middle'
     };
     return (
@@ -39,7 +39,8 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     );
   }
 
-  const isLong = (title.length > 11 && fontSizeAdjustment === 0) || (title.length > 12 && fontSizeAdjustment === -2);
+  const isLong = (title.length > 11 && fontSizeAdjustment === HEADER_FONT_SIZE.SMALL)
+    || (title.length > 12 && fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM);
   const suffixWrap = isLong ? '70' : 'empty';
   const style = {
     ...baseCSS,

src/initialize-transformed.js

@@ -18,8 +18,7 @@ function getAlignment (option) {
 function getFontSizeAdjustment (option) {
   const fontSizeAdjustmentOptions = {
     1: HEADER_FONT_SIZE.SMALL,
-    2: HEADER_FONT_SIZE.MEDIUM,
-    3: 2
+    2: HEADER_FONT_SIZE.MEDIUM
   };
 
   return fontSizeAdjustmentOptions[option] || 0;

src/main.less

@@ -87,14 +87,6 @@
     text-overflow: ellipsis;
   }
 
-  .wrapclass45 {
-    width: 100%;
-    height: 45px;
-    white-space: pre-line;
-    overflow: hidden;
-    display: block;
-  }
-
   .wrapclass70 {
     width: 100%;
     height: 70px;