Ellipsis in combination with button icons breaks

[Kashargul]

<Stack align="center">
  <Stack.Item basis="70%">
    <Button
      fluid
      icon="shopping-cart"
      ellipsis
      color={pack.cost > supply_points ? 'red' : undefined}
      onClick={() => act('request_crate', { ref: pack.ref })}
    >
      {pack.name}
    </Button>
  </Stack.Item>
  <Stack.Item>
    <Button
      color={pack.cost > supply_points ? 'red' : undefined}
      onClick={() =>
        act('request_crate_multi', { ref: pack.ref })
      }
    >
      #
    </Button>
  </Stack.Item>
  <Stack.Item>
    <Button
      color={pack.cost > supply_points ? 'red' : undefined}
      onClick={() => act('view_crate', { crate: pack.ref })}
    >
      Info
    </Button>
  </Stack.Item>
  <Stack.Item grow>{pack.cost} points</Stack.Item>
</Stack>

Current workaround, use the icon as it's own stack element. The props maybe should be exclusive if there's no way to avoid the issue.

Workaround:

<Stack.Item maxWidth="70%" basis="70%">
  <Button
    fluid
    color={pack.cost > supply_points ? 'red' : undefined}
    onClick={() => act('request_crate', { ref: pack.ref })}
  >
    <Stack fill>
      <Stack.Item>
        <Icon name="shopping-cart" />
      </Stack.Item>
      <Stack.Item
        grow
        style={{
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          display: 'block',
        }}
      >
        {pack.name}
      </Stack.Item>
    </Stack>
  </Button>
</Stack.Item>