Seems non-ideal. Typically range controls handle this case.

![Screen Recording 2019-04-12 at 07 54 PM](https://user-images.githubusercontent.com/810438/56059844-0e041100-5d5d-11e9-892c-f3872414ffaa.gif)


---
Originally reported by @gaearon via https://github.com/bvaughn/react-devtools-experimental/issues/141
const width = parseFloat(style.width) - 1;
  return (
    <div
      className={styles.Outer}
      onClick={handleClick}
      onMouseEnter={isMouseDown ? handleClick : null}
      style={{
        ...style,
        width,
        borderBottom: isSelected
          ? '3px solid var(--color-tab-selected-border)'
          : undefined,
      }}
      title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
        commitTime,
      )}s`}>
      <div
        className={styles.Inner}
        style={{
          height: `${Math.round(percentage * 100)}%`,
          backgroundColor:
            percentage > 0 ? getGradientColor(percentage) : undefined,
        }}
      />
    </div>
  );
}
export default memo<Props>(SnapshotCommitListItem, areEqual);