chore: stop increase fee being cutoff when long contract name

[pete-watters]

Try out Leather build 8a11d05 — Extension build, Test report, Storybook, Chromatic

This PR adds ellipsis to the contract name caption to stop it moving the Increase Fee button out of view for long contract names

#5173

[pete-watters]

@fbwoolf - I pushed one more commit to solve this issue

I also switched from a styled.button to a styled.div to try and fix a run time error about invalid nesting. I did fix it but it's still throwing the runtime error, I think as we are using tooltip inside of interactive item. The tooltip trigger is a button so I'm not sure if we can do much there (writing so I don't forget)

[kyranjamie]

Think this is the wrong solution. It is an interactive element so it should be a button.

Why not just overlay the button on top, by absolutely positioning it on top the TransactionItemLayout element, instead of using the rightElement prop?

[fbwoolf]

Yeah, this was the issue with doing the Pressable component as an actual button, but we did decide to go with it and will need to use positioning to remove the warning.

[pete-watters]

I tried doing this but it sent me down a rabbit hole changing lots of things. I can move the Increase Fee button but using absolute position moves it outside of the main container.

Adding more divs with flex and we end up losing the onHover style of the full pressable row which I tried to cobble together but it looks awful:

Even if I do get that looking OK, I will still need to fix two more things as we have fields inside of <Pressable that are using Radix.Tooltip which inherently uses a button as it's trigger, even if you pass asChild to it.

To get rid of this warning I'll need to refactor the TransactionTitle + BitcoinTransactionStatus both of which use BasicTooltip here.

The structure is something like this:

<button // Pressable
    rightElement={<button> // Increase fee}
    ...
    txStatus={<button> // Tooltip}
    txTitle{<button> // Tooltip}
/>   

Even if I do that, I also noticed that the tooltips don't fire at all when inside of Pressable as the pressable CSS prevents them from showing:

Area.mp4

TLDR
I'll roll back my change to styled.button and merge this to fix the visual bug and open another issue for the runtime error

[pete-watters]

Created this issue for problem with tooltips and to fix the nested button runtime error