search

tablelandnetwork / studio

Discover, design, deploy, and manage data driven web3 apps on Tableland.
https://studio.tableland.xyz
4 stars 1 forks source link

Use MetricCard in TablelandTable component #210

Closed asutula closed 7 months ago

asutula commented 7 months ago

Now our use of cards is consistent everywhere. This results in fixing the display issue with long table names in the card. The fix is pretty good, but still not ideal. It's a tricky one. The solution in MetricCard uses hyphen-auto combined with a tooltip: Screenshot 2024-03-06 at 2 18 38 PM

railway-app[bot] commented 7 months ago

This PR is being deployed to Railway 🚅

web: ◻️ REMOVED

joewagner commented 7 months ago

Doesn't look like this fixes the issue

Screen Shot 2024-03-07 at 9 47 48 AM

Also, it feels confusing that there is a dash in the name, but the dash character is not allowed in tablenames.

asutula commented 7 months ago

Yea @joewagner that's why I was saying the fix isn't ideal. It's better than before, but still work to do. I'd say we should go with the incremental improvement for now and keep thinking/working on it. Someone with more css skills than me can dive in.

asutula commented 7 months ago

Oh, just to clarify, the - is used to break the line, but the tooltip shows the accurate table name.

joewagner commented 7 months ago

Oh, just to clarify, the - is used to break the line, but the tooltip shows the accurate table name.

The tooltip works great, definitely a good addition. If I directly copy and paste the name the hyphen is magically removed. Not sure how that works, but it feels like unexpected behavior. As far as css, what about using overflow hidden for the card boundary and breaking with an ellipsis, a hard break, or no break and just let it be hidden? CSS can also shrink the text to fit the card, but that ususally ends up looking unaesthetic.

I realize this is a nit, but it bugs me to look at the text overflowing...

joewagner commented 7 months ago

Yea @joewagner that's why I was saying the fix isn't ideal. It's better than before, but still work to do. I'd say we should go with the incremental improvement for now and keep thinking/working on it. Someone with more css skills than me can dive in.

This should just require one or two added classes, I'm happy to implement whatever we decide looks and works best.

asutula commented 7 months ago

@joewagner I tried all the css fixes you mentioned, but they don't work because it is a single word and there are no white spaces to break on. Also, wrapping the text in the tooltip complicates things because it is implemented with a <button> element that wraps the text. For sure there is some permutation of css I missed, and I'm no expert, though. You are welcome to give it a try.

The tooltip text is set as a prop on the component with the actual table name, that's why it doesn't display the -.

joewagner commented 7 months ago

@joewagner I tried all the css fixes you mentioned, but they don't work because it is a single word and there are no white spaces to break on. Also, wrapping the text in the tooltip complicates things because it is implemented with a <button> element that wraps the text. For sure there is some permutation of css I missed, and I'm no expert, though. You are welcome to give it a try.

I think I know how to accomplish all the stuff I mentioned, but I can work on that separately and we can call this good for now.