Fix Truncation styling issues (#1558)

* fix color inheritance

* tweak width constants

* update snapshot

* Trigger workflow

client/src/components/categorical/value/index.js

@@ -456,11 +456,11 @@ class CategoryValue extends React.Component {
     const valueToggleLabel = `value-toggle-checkbox-${displayString}`;
 
     const VALUE_HEIGHT = 11;
-    const LEFT_MARGIN = 33;
+    const LEFT_MARGIN = 60;
     const CHECKBOX = 26;
-    const CELL_NUMBER = 61;
+    const CELL_NUMBER = 50;
     const ANNO_MENU = 26;
-    const LABEL_MARGIN = 24;
+    const LABEL_MARGIN = 16;
 
     const otherElementsWidth =
       LEFT_MARGIN +
@@ -470,10 +470,14 @@ class CategoryValue extends React.Component {
       (isUserAnno ? ANNO_MENU : 0);
 
     const CHART_WIDTH = 100;
+    const CHART_MARGIN = 24;
 
     const labelWidth =
       colorAccessor && !isColorBy
-        ? globals.leftSidebarWidth - otherElementsWidth - CHART_WIDTH
+        ? globals.leftSidebarWidth -
+          otherElementsWidth -
+          CHART_WIDTH -
+          CHART_MARGIN
         : globals.leftSidebarWidth - otherElementsWidth;
 
     return (

client/src/components/util/truncate.js

@@ -16,17 +16,19 @@ const FIRST_HALF_STYLE = {
   flexShrink: 1,
   minWidth: "5px",
 };
+const SECOND_HALF_STYLE = {
+  position: "relative",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+};
+const SECOND_HALF_SPACING_STYLE = {
+  color: "transparent",
+};
 
 const SECOND_HALF_INNER_STYLE = {
   position: "absolute",
   right: 0,
 };
-const SECOND_HALF_STYLE = {
-  color: "transparent",
-  position: "relative",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-};
 
 export default (props) => {
   const { children } = props;
@@ -46,17 +48,17 @@ export default (props) => {
   const inheritedColor = children.props.style.color;
 
   const splitStyle = { ...children.props.style, ...SPLIT_STYLE };
-  const secondHalfInnerStyle = {
+  const secondHalfContentStyle = {
     ...SECOND_HALF_INNER_STYLE,
-    color: inheritedColor || "initial",
+    color: inheritedColor || "inherit",
   };
 
   const truncatedJSX = (
     <span style={splitStyle}>
       <span style={FIRST_HALF_STYLE}>{firstString}</span>
       <span style={SECOND_HALF_STYLE}>
-        {secondString}
-        <span style={secondHalfInnerStyle}>{secondString}</span>
+        <span style={SECOND_HALF_SPACING_STYLE}>{secondString}</span>
+        <span style={secondHalfContentStyle}>{secondString}</span>
       </span>
     </span>
   );