Tokens: fix the text overflow in the header

[bpierre]

Not strictly necessary with the normal app title, but it is a structure we can reuse on other apps too.

Before:

After:

[sohkai]

LGTM! This looks like something we could eventually standardize for cases where Tags adorn inline text.

[bpierre]

This looks like something we could eventually standardize for cases where Tags adorn inline text.

Yes, this is something we often need and I would like to have into aragonUI.

Maybe we could make it generic enough to be an independent component:

<Header
  primary={
    <TextClip
      primary="Tokens"
      secondary={
        <Tag mode="identifier">ANT</Tag>
      }
    />
  }
/>

// We could also have a prop (expand) to specify that
// we want the text to take the full width available.
<Box heading="Balances">
  <ul>
    <li>
      <TextClip
        expand 
        primary="My Token Name"
        secondary="2 ANT"
      />
    </li>
    </ul>
</Box>

primary would contain a string most of the time (an element could still be used as long as its display stays inline), and secondary would generally contain a Tag, but could also contain a Badge, a Button etc.

[sohkai]

I like TextClip, and agree primary should be typed as a string! Let's add it to aragonUI!

Perhaps we can follow our own component submission guidelines and go through that process. Even for something this simple, let's test it out :).