Fix line wrapping of grid axis label

oblador · Dec 2, 2019 · b2fdc5f · b2fdc5f
1 parent 29471a2
commit b2fdc5f
Showing 1 changed file with 18 additions and 29 deletions.
diff --git a/src/ui/Grid.js b/src/ui/Grid.js
@@ -2,26 +2,32 @@ import React from 'react';
 import { FlexRow, styled, Text } from 'flipper';
 import { COLOR_SEPARATOR, COLOR_DISABLED } from './constants';
 
-const LABEL_HEIGHT = 15;
+const LABEL_HEIGHT = 12;
 const LABEL_MARGIN = 10;
 
 const SpacedRow = styled(FlexRow)({
   justifyContent: 'space-between',
 });
 
+const AxisLabel = styled('div')({
+  position: 'relative',
+  width: 1,
+  marginBottom: LABEL_HEIGHT + LABEL_MARGIN,
+  backgroundColor: COLOR_SEPARATOR,
+});
+
 const AxisText = styled(Text)({
   fontSize: 12,
+  lineHeight: 1,
   color: '#999',
+  position: 'absolute',
+  top: '100%',
+  right: 0,
+  marginTop: LABEL_MARGIN,
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
 });
 
-const Axis = ({ interval, numberOfIntervals, unit }) => (
-  <SpacedRow>
-    {new Array(numberOfIntervals).fill(null).map((_, i) => (
-      <AxisText>{i * interval}</AxisText>
-    ))}
-  </SpacedRow>
-);
-
 const identity = a => a;
 
 export const Grid = ({
@@ -50,26 +56,9 @@ export const Grid = ({
         value === 0 ? (
           <div />
         ) : (
-          <div
-            style={{
-              position: 'relative',
-              width: 1,
-              marginBottom: LABEL_HEIGHT + LABEL_MARGIN,
-              backgroundColor: COLOR_SEPARATOR,
-            }}
-          >
-            <AxisText
-              style={{
-                position: 'absolute',
-                top: '100%',
-                right: 0,
-                marginTop: LABEL_MARGIN,
-                textAlign: 'right',
-              }}
-            >
-              {formatLabel(value)}
-            </AxisText>
-          </div>
+          <AxisLabel>
+            <AxisText>{formatLabel(value)}</AxisText>
+          </AxisLabel>
         )
       )}
   </SpacedRow>