Links don't render correctly when used with flexDirection='row'

[tknickman]

I am seeing a strange issue when using ink-link (or terminalLink as well) along with the Box provided by ink.

I am trying to make a two column layout with ink, utilizing links in each column.

If I add links to the text as follows:

const LinkBugExample = () => {
  return (
    <Box flexDirection="column">
      <Box>
        <Link url="www.google.com">google</Link>
      </Box>
      <Box>
        <Link url="www.bing.com">bing</Link>
      </Box>
    </Box>  
  );
};

This renders fine:

But, if I change to flexDirection row:

const LinkBugExample = () => {
  return (
    <Box flexDirection="row">
      <Box>
        <Link url="www.google.com">google</Link>
      </Box>
      <Box>
        <Link url="www.bing.com">bing</Link>
      </Box>
    </Box>  
  );
};

This does not render correctly:

I can render two links inlina via:

const LinkBugExample = () => {
  return (
    <Box flexDirection="row">
      <Link url="www.google.com">google</Link>
      <Link url="www.bing.com">bing</Link>
    </Box>
  );
};

So it seems to be something with how nested row boxes are working (possibly something with the width calculation?).

I'm happy to help, but any ideas on where to start?

I'm using: ink-link@1.0.0 ink@2.7.1

And my terminal is iTerm2 Build 3.3.9

[vadimdemedes]

Created https://github.com/chalk/slice-ansi/issues/31 for this issue, thanks for reporting!