The magic wrapper to avoid CSS overflow.

OneLineScroller.jsx

const outerWrapperStyle = {
  overflow: 'hidden' // Avoid breaking UI
}

const innerWrapperStyle = {
  whiteSpace: 'nowrap', // Render text in one line
  display: 'block',
  overflow: 'auto', // Scroll overflow if needed
}

const OneLineScroller = ({ children }) => (
  <span style={outerWrapperStyle}>
    <span style={innerWrapperStyle}>
      {children}
    </span>
  </span>
);