[$30] Fix UI for REF on the project details page

[maxceem]

Very long REF goes beyond the screen.

See several examples below.

1. Short REF

• Looks good. On the same line as the date. Example: https://connect.topcoder-dev.com/projects/8193

  

2. Middle REF

• Goes to the next line and creates spaces, which looks not that good. Example: https://connect.topcoder-dev.com/projects/8192

  

3. Long REF

• Goes to the next line and cut by the screen, which is not good. http://connect.topcoder-dev.com/projects/8219

  

I guess we should agree on:

1. What is the expected normal maximal length for a REF code.
2. Find out where to put so it's showing in a good way for all lengths.

[vikasrohit]

@maxceem earlier we used to have a max length validation of 7 for ref code, however, that was lifted because of business requirements. I think the best solution is to show ellipsis for any text that exceeds width of 10 characters approximately. We should also show a tooltip with full ref code.

[maxceem]

I guess we also have to apply a similar fix for the project listing page:

REF code in the table should be one-line only and if it's longer than one line, then it should be truncated with ... at the end.

[vikasrohit]

Yes

[maxceem]

Sum up:

1. REF code should be always shown on one line. If the is no enough space it should be truncated with ... at the end. This should be done use CSS only.
2. We also should show tooltip with the full REF code. We already have a Tooltip component for it. See example usage.

[suppermancool]

@maxceem pls assign to me

[suppermancool]

@maxceem the Tooltip component don't show good if the text is too long for example:
https://gyazo.com/1985f1ad103b232bce93b0ac2238f5af

I think the default tooltip of browser look good in this case:
https://gyazo.com/3c4b1f5afe66bfd93589413d31786477